1. container 속성 값
▪ display: felx
▪ flex-direction: row, column (-reverse) => 중심축 결정
▪ flex-wrap: nowrap(기본값), wrap(-reverse) => 아이템이 화면을 꽉 차게 되면 다음 줄로 내려온다.
▪ flex-flow: column nowrap => flex-direction과 flex-wrap을 한 번에 설정
▪ jestify-content: flex-start(기본값), flex-end, center, space(-around, -evenly, -between) => 아이템 정렬 방법 in main axis
▪ align-content: 위와 동일 => 아이템 정렬방법 in cross axis
▪ align-items
2. item 속성 값
▪ order: 0(기본값) => 아이템마다 순서 설정
▪ flex-grow: 0(기본값) => 아이템마다 크기 비율 지정, 화면이 작으면 작아지지만 설정한 크기를 유지하려고 함
▪ flex-shrink: 0(기본값) => 화면이 작아졌을 때 어떻게 행동하느냐 결정
▪ flex-basis: auto(기본값), 60% => grow 또는 shrink를 지정하지 않았을 때 아이템마다 기본 비율을 정해줌
▪ align-self: center 등 => 아이템별로 정렬을 맞춤
3. 중심축과 반대축
중심축: 아이템들이 배열되는 축 (main axis)
반대축: 중심축의 반대축 (cross axis)
참고 사이트: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi
css-tricks.com