다양한 디바이스와 화면 크기에 자동으로 적용하여 콘텐츠를 최적으로 표시하는 웹 레이아웃 방식 지금은 다양한 디바이스로 웹페이지를 본다 그래서 어떤 화면으로 보는지에 따라서, 레이아웃이 바뀔 수 있도록 해야한다. Flex-wrap을 사용해서 반응형 레이아웃을 작성할 수 있다 (Flex-grow & Flex-basis 활용)

▷ Flex-basis Flex item의 초기 크기 값을 지정한다 Flex-basis와 width 값을 동시에 적용한 경우 Flex-basis가 우선이다

남는 행 여백을 비율에 따라 각 Flex item에 분배한다 아이템이 컨테이너 안에서 확장하는 비율을 지정한다 Flex-grow ↔ Flex-shrink

▷ Flex Container 관련 속성 display, flex-direction, flex-wrap justify-content, align-items, align-content ▷ Flex Item 관련 속성 align-self, flex-grow, flex-basis, order

교차 축을 따라 개별 flex item을 정렬한다

교차 축을 따라 flex item 행을 정렬한다

▷ align-content 교차 축을 따라 flex item과 주위에 공간을 분배한다 flex-wrap이 wrap 또는 wrap-reverse로 설정된 여러 행에만 적용된다 한 줄 짜리 행에는 효과가 없다 (flex-wrap이 nowrap으로 설정된 경우)

주 축을 따라 flex item과 주위에 공간을 분배한다

▷ Flex-wrap Flex item 목록이 Flex container의 한 행에 들어가지 않을 경우 다른 행에 배치할지 여부를 설정한다

▷ Flex direction flex item이 나열되는 방향을 지정한다 column으로 지정할 경우, 주 축이 변경된다 "-reverse"로 지정하면 flex item 배치의 시작 선과 끝 선이 서로 바뀐다