css - flex

flex (정렬)

 

display  : Flex container의 화면 출력(보여짐) 특성

•     flex -  블록요소와 같이 flex container 정의 (flex contaiver가 블록 요소처럼 세로로 쌓임)
•     inline-flex - 인라인 요소와 같이 flex container 정의 (인라인 요소처럼 가로로 쌓임)

 

flex-direction : 주축을 설정

•    row                행축(좌  -> 우)
•    row-reverse      행축(우  -> 좌)
•    column           열축(위  ->  아래 )
•    column-reverse 열축(아래 -> 위)

 

flex-wrap : flex items 묶음(줄 바꿈) 여부

•  nowrap 묶음(줄바꿈) 없음
• wrap 여러줄로 묶음

 

justify-content 주축(수평)의 정렬방법

•  flex-start  Flex Items를 시작점으로 정렬
• flex-end  flex Items를 끝점으로 정렬
• center  flex items를 가운데 정렬
• space-between  각 flex items 사이를 균등하게 정렬
• space-around 각 flex items의 외부 여백을 균등하게 정렬

 

align-contenet : 교차축(수직)의 여러 줄 정렬 방법 (한 줄 일 때 제어되지 않음)

• stretch flex items를 시작점으로 정렬
• flex-start flex items를 시작점으로 정렬
• flex-end  flex items를 끝점으로 정렬
• center flex items 가운데 정렬

align-items : 교차축의 한줄 정렬 방법

• stretch flex items를 교차축으로 늘림
• flex-start flex items 각줄의 시작점으로 정렬
• flex-end flex items 각줄의 끝점으로 정렬
• center flex items를 각줄의 가운데 정렬
• baseline flex items 각줄의 문자 기준선에 정렬

 

속성 정리 (사용 가능한)

 

 

Flex container 

• display
• flex-flow, flex-direction, flex-wrap
• justify-content
• align-content
• align-itens

Flex Items

• order
• flex, flex-grow, flex-shrink, flex-basis
• align-self

 

Flex Items의 속성

 

order  :   flex item의 순서

•  0         순서 없음
• 숫자      숫자가 작을수록 먼저(음수도 가능)

 

flex-grow : flex item의 증가 너비 비율

• 0          증가비율 없음(기본값)
• 숫자      증가 비율

 

flex-shrik  :  flex item의 감소 너비 비율

• 1        flex container 너비에 따라 감소 비율 적용(기본값)
• 숫자    감소비율(0, 2....)

                -요소들이 찌그러지길 원치 않으면 각각 아이템에 flex shrink 값을

                 0으로 주면 부모 요소에 맞춰 줄어들지 않음 

 

 

 

flex-basis : flex item의 공간 배분 전 기본 너비

• auto     요소의 content 너비
• 단위     px, em, rem 등 단위로 지정