[CSS기초] flex의 컨테이너 속성

 

---

 

화면을 구성할 때 flex 속성을 사용하면 유연하게 아이템을 배치할 수 있다.

flex는 기본적으로 컨테이너 속성과 아이템 속성 두 가지로 나눠볼 수 있다.

 

컨테이너 속성

1️⃣display : flex;

display의 값을 flex 로 선언해주면 플렉스 박스로 만들어 줄 수 있다. 

컨테이너 안의 아이템들은 화면 해상도에 맞는게 유연하게 동작하게 된다.

inline-flex값도 존재하지만 거의 사용되지 않는다. 컨테이너의 아이템들이 반응형으로 동작하지 않기 때문이다.

👉🏻flex : 컨테이너가 블록 속성을 갖는다.

👉🏻inline-flex : inline-block과 같은 속성을 갖는다. 

flex속성을 지정하면 아이템들은 가로 방향으로 배치되고, 따로 길이를 지정하지 않으면 content만큼만 차지하게 된다.

기본 상태

display:flex

2️⃣flex-direction

아이템들이 배치되는 축의 방향을 결정한다.

justify-content와 align-item는 메인 축에 따라 바뀔 수 있으니 주의해야 한다.

flex-direction : row (기본값);

flex-direction : column;

flex-direction : row-reverse;

flex-direction : column-reverse;

 

3️⃣flex-wrap

컨테이너가 더 이상 아이템을 담을 공간이 없을 때 줄바꿈을 어떻게 할 건지 결정해준다.

flex-wrap : nowrap(기본값);

flex-wrap : wrap;

flex-wrap : wrap-reverse;

nowrap

wrap

wrap-reverse

4️⃣flex-flow

flex-direction과 flex-wrap을 한 번에 지정할 수 있는 단축 속성

flex-flow:row wrap
//flex-direction : row;
//flex-wrap:wrap;

 

5️⃣justify-content

메인축 방향으로 아이템들을 정렬하는 속성이다.

justify-content:flex-start;

center;

flex-end;

space-between;

space-around;

여기서 중요한 점은 flex-direction에 따라 메인축이 변경되면 적용되는 모양이 다르기 때문에 주의해야 한다. 

6️⃣align-items

컨테이너 내의 아이템들을 수직 방향(교차 축)으로 정렬하는 데 사용된다. 

 

align-items : stretch;(기본값)

: 교차 축으로 늘어나는 비율이 동일하게 설정된다, 아이템의 크기가 명시되지 않으면 컨테이너 공간을 모두 차지한다.

align-items : stretch;(기본값)

align-items : flex-start;

:아이템들이 컨테이너 교차 축 시작점으로 정렬한다.

왼쪽 : row  오른쪽 :column

align-items : felx-end;

:아이템들이 컨테이너 교차 축 끝점으로 정렬한다.

왼쪽 : row  오른쪽 :column

align-items : center;

:아이템들이 컨테이너 교차 축 중앙으로 정렬한다. 

왼쪽 : row  오른쪽 :column

align-items : baseline;

:아이템들을 컨테이너의 교차 축 기준선에 정렬시킨다. 아이템들의 텍스트 기준선을 맞추는 데 사용한다.

왼쪽 : row  오른쪽 :column

 

속성에 따라 다를 수 있지만 기본적으로는

메인 축이 row :  아이템의 가로 방향

메인 축이 column : 아이템의 세로 방향

이라고 생각하면 된다.

 

7️⃣align-content

이 속성은 여러 줄이 있는 flex 컨테이너에 대해서만 사용할 수 있다.

행이 늘어났을 때 어떻게 정렬할 것인지 정하는 속성이다. flex-wrap:wrap으로 설정되어야 동작한다.

 

align-content:flex-start;

center;

end

space-between;

 

space-around;