CSS - Flexbox로 레이아웃 잡기

display: flex 분석하기

display: flex는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법이다. fllexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정해 줄 수 있다. flexbox 속성 중에서는 부모 요소에 적용해야하는 속성들, 자식요소에 적용해야하는 속성들이 있다.

 

 

부모 요소에 적용해야하는 Flexbox 속성

1. flex-direction : 정렬 축 정하기

 

 

2. flex-wrap : 줄 바꿈 설정하기

- 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정한다.

 

 

3. justify-content : 축 수평 방향 정렬

- 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정한다.

 

 

4. align-items : 축 수직 방향 정렬

- 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정한다.

 

 

 

자식 요소에 적용해야 하는 Flexbox 속성

- 부모 요소에 적용해야 하는 속성들이 자식 요소들의 정렬과 관련이 있었다면, 자식 요소에게 적용해야 하는 속성인 flex는 요소가 차지하는 공간과 관련이 있다.

 

 

flex 속성의 값

flex : <grow(팽창지수)>  <shrink(수축지수)>  <basis(기본크기)>

flex 속성을 따로 설정해주지 않으면 기본 값이 적용되며, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치된다.

flex : 0 1 auto;

flex 속성 안에 세 가지 값을 한 번에 설정해줄 필요 없이 다음과 같이 각 값을 따로 지정해 줄 수도 있다.

flex-grow : 0;
flex-shrink: 1;
flex-basis: auto;

 

1. grow 

grow(팽창지수)는 정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것이다.

 

2. shrink

shrink(수축지수)는 grow와 반대로, 설정한 비율만큼 박스 크기가 작아진다. 그러나 flex-grow 속성과 flex-shrink 속성을 함께 사용하는 것은 추천하지 않는다. flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방하다.

 

3. basis

basis(기본크기)는 자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기이다. flex-grow가 0일 때, basis 크기를 지정하면 그 크기는 유지된다.