$$config title: [CSS] flex 종류 keywords: - IT - CSS - flex $$ ? flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성 !
```` ? justify-content : 가로축
flex-start : 컨테이너의 왼쪽으로 정렬 flex-end : 컨테이너의 오른쪽으로 정렬 center : 컨테이너의 가운데로 정렬 space-between : 요소들 사이에 동일한 간격을 둔다. space-around : 요소들 주위에 동일한 간격을 둔다.
? align-items : 세로축
flex-start : 컨테이너의 꼭대기로 정렬 flex-end : 컨테이너의 바닥으로 정렬 center : 컨테이너의 세로선상의 가운데로 정렬 baseline : 컨테이너의 시작 위치에 정렬 stretch : 컨테이너에 맞도록 늘린다.
? flex-direction : 정렬할 방향을 지정한다.
row : 요소들을 텍스트의 방향과 동일하게 정렬 row-reverse : 요소들을 텍스트의 반대 방향으로 정렬 column : 요소들을 위에서 아래로 정렬 column-reverse : 요소들을 아래에서 위로 정렬
? flex-wrap : Flex 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬 한다.
nowrap : 모든 요소들을 한 줄에 정렬 한다. wrap : 요소들을 여러 줄에 걸쳐 정렬 한다. wrap-reverse : 요소들을 여러 줄에 걸쳐 반대로 정렬 한다.
? align-content : 세로선 상에 여분의 공간이 있는 경우 flex 컨테이너 사이의 간격을 조절한다.
flex-start : 여러 줄들을 컨테이너의 꼭대기에 정렬한다. flex-end : 여러 줄들을 컨테이너의 바닥에 정렬한다. center : 여러 줄들을 세로선 상의 가운데에 정렬한다. space-between : 여러 줄들 사이에 동일한 간격을 둔다. space-around :여러 줄들 주위에 동일한 간격을 둔다. stretch : 여러 줄들을 컨테이너에 맞도록 늘린다.
* column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀐다. * Flex의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 뱡향이 가로로 바뀐다. * order 의 기본 값은 0이며, 양수나 음수로 바꿀 수 있다. * align-self 는 개별 요소에 적용할 수 있는 또다른 속성 (align-items 값을 무시하고 Flex 요소를 세로선상에서 정렬) * flex-direction 과 flex-wrap 이 자주 같이 사용되기 때문에 flex-flow 가 이를 대신 할 수 있다. ````