[CSS] Flexbox로 레이아웃 잡기

💑 부모 요소

display : flex

[부모 요소에 적용할 수 있는 Flexbox 속성들]

1. flex-direction 정렬 축 정하기

flex-direction : row;  /*row(기본값) column, row-reverse, column-reverse*/

 2. flex-wrap 줄 바꿈 설정

flex-wrap : nowrap; /*nowrap(기본값), wrap, wrap-reverse*/

 

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

justify-content : flex-start; /* flex-start, flex-end, center, space-between, space-around */

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

align-items : stretch; /* stretch, flex-start, flex-end, center, baseline */

 

👨‍👩‍👧‍👦 자식 요소

[flex 속성]

/* 기본값 */
flex : 0 1 auto;

flex : grow(태그의 크기가 늘어날 때 얼마나 늘어날지) shrink(설정한 비율만큼 박스 크기 작아짐) basis(기본크기);

- 비율로 레이아웃을 지정할 경우, flex-grow 속성 또는 flex : grow 1 auto 와 같이 grow 속성에 변화를 주는 방식 권장

   flex-shrink 속성은 width나 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기 어려움!

 

flex-basis

- flex-grow 값이 0인 경우에만 flex-basis 속성 값 유지

- width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선

- 콘텐츠가 넘치는 경우, width가 정확한 크기 보장하지 않음

- (flex-basis를 사용하지 않는다면) 콘텐츠가 넘치는 경우를 대비해 max-width를 사용할 수 있음

 

/* 실제 너비 1:1:1인 경우는? */

/* NOT */
flex-grow : 0;
flex-basis : auto;

/* GOOD */
flex-grow : 0;
flex-basis : 0;

 

 

* 참고

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN