html & css/개념

flex - 기타 속성들

Doo Hee 2023. 11. 24. 23:53

flex-wrap

랩을하면 컨테이너의 크기보다 아이템들의 크기가 크다면 아이템들의 크기의 합이 크다면, 그 아이템은 줄바꿈이 돼서 아래 줄로 내려간다는 의미

기본값은 no-wrap이다.

 

aling-items

수직과 관련된 정렬의 결정을 한다.

기본값은 stretch가 기본값

컨테이너의 아이템들이 있고, 컨테이너가 플렉스 되는 순간에 아이템들은 컨테이너의 높이 값과 같아진다. (스트레치 상태)

자신의 컨텐트 크기만에 될려면 flex-start ,flex-end, center

baseline -콘텐트들에 가상의 줄을 맞추는 것

 

justify-content

수평과 관련됨

flex-start ,flex-end, center - 왼쪽, 오른쪽, 가운데

 

alingn-content

alingn-items는 컨테이너 밑에 있는 아이템 전체를 정렬하는 것이고, aling-content는 같은 행에 있는 것을 하나의 그룹으로 지정해 그룹과 그룹사이의 정렬을 결정하는 것이다.

 

properties for the flec items

아이템들의 정렬과 아이템들에 부여되는 속성

align-self는 기본적으로 align-items로 지정되어있는 상태에서 어떤 특정한 것만 예외적으로 다르게 값을 주고 싶을 때 사용한다.

 

flex

flex-basis, grow, shrink를 축약한 것

 

order

아이템들의 순서를 바꾸고 싶을 때 사용한다.