[CSS] Flexbox(1) - Flex와 Container속성

이번 시간에는 레이아웃을 짜는데 사용되는 Flex에 대해 배웠다.

그냥 막연하게 사용하기만 하였는데, 이번 기회에 제대로 짚고 원리까지 알고 넘어가보자.

이번 포스팅은 컨테이너 속성에 대해 다루고, 다음 포스팅은 아이템 속성에 대해 다루도록 한다.

내용이 좀 길 수 도 있다.

그럼 킵고잉~~

---

✨Flexbox - 자주 쓰이기 때문에 중요함!

: 주로 레이아웃 만들 때 사용. (반응형)

반응형 웹사이트를 디자인 할 때 요소의 변화를 위해 사용함. 웹사이트를 사용하는 장치 유형에 따라 너비, 높이, 해상도, 방향 등과 같은 동작에서 변경될 때 사용.

• 1차원 레이아웃을 제공함
  • 참고로, Grid는 이차원임.

Flexbox Components 구성요소

Felx Container

: display를 flex, 또는 inline-flex로 설정하여 상위 요소의 속성을 정의한다.

Felx Items

: 컨테이너의 자식들.

사진으로 보면 이러하다.

Flexbox Properties 속성들

: 위에서 구성요소로 언급했던 컨데이너 속성, 아이템 속성들로 구분이 된다.

html은 사진과 같이 구성된다. 컨테이너가 아이템들을 담는 모양. 무슨말인지 아시겠죠?

---

두 개의 축 Main, Cross Axis

flexbox로 작업할 때 두 축을 생각해야한다

• 주축 (Main Axis)
• 교차축 (Cross Axis)

주축은 flex-direction 속성에 의해 정의되고, 교차축은 주축의 수직으로 진행됨.

flexbox로 수행하는 모든 작업은 이러한 축을 다시 참조한다.

☝🏻 따라서 작동 방식을 이해하는것이 좋음!

대충 축을 따라 진행한다~ 라고 생각하면 된다.

---

✨Flex 컨테이너 속성들 자세히 알아보기

✔️flex-direction

: 사용 방법은 아래와 같다.

.container {
    border: 3px solid lightgray;
    display: flex;
    flex-direction: row;
    /* flex-direction: row | row-reverse | column | column-reverse  */
}

• row(수평으로)

• column(수직으로)

• row-reverse(수평의 역순)

순서 뿐만 아니라 시작 지점도 옮겨진것을 볼 수 있다

• column-reverse(수직의 역순)

 

 

✔️flex-wrap

줄 바꿈이 일어남. (기본적으로는 아이템 수가 늘어나면 크기가 줄어들면서 쭈구리가 됨,

하지만 이걸 설정하면 줄바꿈이 일어나서 쭈굴이가 되지 않음!)

원래는 이렇게 된다.

• nowrap(기본값) : 모든 flex항목이 한 줄에 표시됨

• wrap : 줄바꿈됨

아래가 더 작음

• wrap-reverse

위가 더 작음

 

✔️flex-flow

: 위의 두개 같이 쓰는거다.

flex-flow: <flex-direction><flex-wrap>

 

✔️justify-content

: 주축에 따라 정렬을 정의함. 공간을 스껄하게 분산한다.

• flex-start : 주축에서 시작하는 부분으로
• flex- end: 주축에서 끝나는 부분으로
• center: 가운데로
• space-between : 줄에 고르게 분포 (아이템간에만 공백, 양 끝은 공백 없이 배치)
• space-around: 약간 좀 다른데 골고루… 동일한 공간
• space-evenly : 두 아이템 사이의 간격이 동일하도록 분포 (골고루, 이븐하게 분포됐네요)

안성재가 떠오른다.

around와 evenly 가 뭐가 다른거야? 할 수 도 있겠는데 아래의 사진을 보면 된다.

evenly는 말 그대로 안성재님도 박수를 칠 정도로 골고루 열이 분산되었다. 고 생각하면 된다.

.container {
    border: 6px solid lightgray;
    display: flex;
    justify-content: space-evenly;
    /* flex-start | flex-end | center | space-between | space-around | space-evenly; */
}

 

✔️align-items

: 축의 수직 방향을 기준으로 정렬이 됨. 즉, 교차축 (Cross Axis)을 기준으로 정렬이됨

• 교차축에 대한 justify-content라고 생각하면 된다

☝🏻 justify-content : 주축따라 정렬  align-items : 교차축 따라 정렬

 

.container {
    border: 6px solid lightgray;
    display: flex;
    height: 800px;
    align-items: baseline;
}

 

• flex-start

• flex-end

• center

• stretch : 길쭉이가 되~..

• baseline : 가운데 선을 기준으로 정렬이 됨. (선 하나 그어져있다 생각하세요)

 

✔️align-content

☝🏻 align-items : 한줄에 적용. (한줄을 기준으로 정렬) align-content : 라인 자체가 정렬됨 (통째로) 두줄 이상이 되어야 사용가능. flex-wrap;wrap인 상태에서 사용 가능.

 

flex-start | flex-end | center | stretch | space-between | space-around

.container {
    border: 6px solid lightgray;
    display: flex;
    width: 500px;
    height: 800px;
    flex-wrap: wrap;
    align-content: space-around;
    /* flex-start | flex-end | center | stretch | space-between | space-around  */
}

 

 

✔️align-self

: 부모 요소에 자식들을 전체로 정렬하는게 아니라, 개별로 정렬 가능.

☝🏻 item이랑 content는 부모 요소에서 아이템들 전체를 잡아서 컨트롤 해주는데, self는 하나만, 아이템 하나만 정렬을 다르게 해주길 원할때 사용.

 

.item-1 {
    background-color: lightblue;
    align-self: flex-start;
}

.item-2 {
    background-color: lightyellow;
    align-self: center;
}

.item-3 {
    background-color: lightpink;

}