flex 레이아웃

float는 해당속성 이외에도 clear를 사용해 주거나 해야하는데
flex는 오직 flex 관련 속성만 이용해서 배치작업이 가능하고, 다양한 레이아웃 커스텀이 더 쉬운 방식으로 가능함.

flex 레이아웃 사용방법

요소의 속성을 flex로 변경

flex 레이아웃이 적용된 박스를 플렉시블 박스 라고 부르는데
플렉시블 박스를 이용하려면 가장 먼저 디스플레이 속성을 주어야함.

display: flex 를 하면 해당 요소는 inline, block 요소가 아닌 flexible box라는 독자적 속성으로 구분이 됨.

또한 display: flex가 적용된 요소는 flex-container가 되고,
flex-container의 자식요소들은 flex-item이 됨

flex-direction

정렬의 기준이 되는 방향을 결정하는 속성
row : 행, column : 열

flex-direction: row 가 기본값으로 위처럼 중심축이 가로로 되어있음.

column으로 하면 중심축을 세로로 변경할 수 있음.

justify-content

중심축 방향 정렬

align-items

중심축 반대 방향 정렬

아이템을 쭉 늘려서 컨테이너 영역을 채우게됨

주의 사항

또한 row-reverse나 column-reverse 같은 경우에도 flex-start나 flex-end의 기준점이 되는 라인도 바뀔 수 있음.