flex
block이나 inline 요소가 아닌 (flexible box)라는 독자적인 속성을 가진 요소로 구분됨
1. display: flex;
요소의 속성을 flex로 변경
중심축과 교차축은 Flexible box의 정렬 기준이 된다.
2. flex-direction (배치 방향 설정)
flex-direction: row 행 (기본)
flex-direction: column 열 (중심축 가로-> 세로 변경)
순서를 뒤집는 속성
flex-direction: row-reverse
flex-direction: column-reverse
3. justify-content: 중심축 방향으로 어떻게 정렬할지 결정
4. align-items: 교차축 방향(기본: 수직) 정렬
align-content(세로 정렬)
align-items는 한 줄일 때만 적용되므로 두 줄 이상이면 align-content 사용해야 함
flex-wrap
flex-wrap : nowrap
(기본값)item의 줄바꿈을 허용하지 않습니다.
따라서 item이 아무리 많아져도 무조건 한줄에 들어가게 됩니다.
flex-wrap : wrap
item의 가로 사이즈가 container의 가로 사이즈를 넘겼을 때, 자연스럽게 다음 줄로 넘어갑니다.
flex-flow
단축 속성 예시) border: 1px solid black;
flex-item 속성들
flex-container: dispaly:flex가 적용된 요소
flex-item: flex-container 안의 각각의 아이템들
order
: item의 순서를 지정합니다.
flex-basis
: item의 기본사이즈를 지정합니다.
flex-shrink
: 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item요소의 크기가 축소됩니다.
flex-grow
: flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다.
위의 속성 이외에도 flex-item에는 여러가지의 속성이 있습니다.
❗️ 이런 속성들은 모두 외울 필요가 없습니다!
먼저, 각각의 속성들이 어떤 기능을 하는지 이해하는 것이 우선입니다.
그 후에는 필요할 때 마다 찾아보면서 사용하셔도 무방합니다. (실무에서도 그렇게 합니다.?)