[CSS] flex 레이아웃

flex레이아웃

CSS 레이아웃 배치에 중점을 두고 고안되었기 때문에 기존의 float 방식보다 훨씬 수월하고 간단하게 레이아웃을 잡을 수 있다.

1. 요소의 속성을 flex로 변경
   display : flex
2. flex-direction : row(기본값) | columns
3. justify-content : 중심축 방향 정렬
   flex-start(기본값), flex-end, center, space-around, space-between, space-evenly
4. align-items : 중심축 반대 방향 정렬
   stretch(기본값), flex-start, flex-end, center

⭐️ align-items는 flex-item이 한 줄 일 때 우선 적용!
두 줄 이상일 때에는 align-content라는 다른 속성을 써주어야 한다.

⭐️ flex-direction이 바뀌면 중심축의 방향이 바뀐다!
중심축의 방향이 바뀌면, justify-content와 align-item의 정렬 방향도 함께 바뀌게 된다.

 

 

flex레이아웃 기타속성

1. flex-wrap
   flex-item이 여러개일 때, item들의 줄바꿈을 허용할 것인지 말 것인지를 결정한다.
   flex-wrap : nowrap (기본값)
   flex-wrap : wrap (넘칠 경우 다음줄로 넘어감)
   
   
2. align-content 여러 줄이 된 flex-item의 중심 반대 축 정렬을 어떻게 할 지 결정한다.
   align-content : stretch (기본값)
   align-content : flex-start
   align-content : flex-end
   align-content : center
   align-content : space-between
   align-content : space-around
   align-content : space-evenly
   
   
3. flex-flow flex-direction 과 flex-wrap을 합쳐놓은 단축 속성
   * 단축속성 예 : border : 1px solid red;
   
   flex-direction : column;
   flex-wrap : wrap;
   👉🏻 flex-flow: column wrap
   
   
4. flex-item 속성들
   order : item의 순서를 지정 flex-basis : item의 기본 사이즈를 지정 flex-shrink, flex-grow 등