flex-container 속성들
가상 클래스 선택자
실제로 html요소를 수정하지 않고 css만으로 가상 요소를 추가해 선택할 수 있다.
-
flex-wrap
flex-item이 여러개일 때, item들의 줄바꿈을 허용할 것인지 말 것인지 결정
flex-wrap: nowrap(기본값)
item의 줄바꿈을 허용하지 않음.
item이 아무리 많아져도 무조건 한줄에 들어가게됨
flex-wrap: wrap
item의 가로 사이즈가 container의 가로 사이즈를 넘겼을 때, 자연스럽게 다음 줄로 넘어감.
⛔️ 주의
📍align-items는 flex-item이 한 줄일 때 우선 적용!
📍 두 줄 이상일 때에는 align-content라는 다른 속성을 써주어야 한다.
-
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
-
-
flex-flow
flex-direction과 flex-wrap을 합쳐놓은 단축 속성
flex-item 속성들
-
order: item의 순서를 지정
-
flex-basis: item의 기본사이즈를 지정
-
flex-shrink: 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item요소의 크기가 축소됨
-
flex-grow: flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언함
📢MDN 사이트 참조
