Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공한다.
- flex는 Container와 Items에 적용 할 수 있는데 적용하는 속성이 구분되어있다.Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해선 Container가 필수이다.
Container에 적용 할 수있는 속성
display :Flex Container를 정의
justify-content :주 축(main-axis)의 정렬 방법을 설정
align-items :교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄)
align-content :교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상)
flex-direction :Flex Items의 주 축(main-axis)을 설정
flex-wrap :Flex Items의 여러 줄 묶음(줄 바꿈) 설정
flex-flow :flex-direction와 flex-wrap의 단축 속성
Items에 적용할 수 있는 속성
order, flex, align-self 등의 속성을 사용할 수 있다.
1. display (display: flex, display: inline-flex)
- display 속성
display 속성으로 Flex Container를 정의한다.
(보통 요소는 display: block;, display: inline-block 혹은 display: none; 로 표현)
같은 요소의 표시 방법이지만 Block이나 Inline이 아닌 Flex(display: flex, display: inline-flex)로 정의한다.
- flex는 Block 특성(수직으로 쌓임)의 Flex Container를 정의.
- inline-flex : Inline 특성(수평으로 쌓임)의 Flex Container를 정의.
두 값은 내부 Items에는 영향을 주지 않는다.
2. 주 축(main-axis)과 교차 축(cross-axis)
- row는 Items를 수평축으로 표시하므로 이때는 주 축이 수평이며 교차 축은 수직이다.
- column은 Items를 수직축으로 표시하므로 주 축은 수직이며 교차 축은 수평이다.
즉, 방향(수평, 수직)에 따라 주 축과 교차 축이 달라진다.
3.flex-wrap
Items의 줄 바꿈을 설정.
-기본적으로 Items는 한 줄에서만 표시되고 줄 바꿈 되지 않는다.
이는 지정된 크기(주 축에 따라 width나 height)를 무시하고 한 줄 안에서만 가변한다.
- nowrap : 모든 Itmes를 여러 줄로 묶지 않음(한 줄에 표시) default값
- wrap : Items를 여러 줄로 묶음 (여러줄에 걸쳐 표시)
- wrap-reverse : items를 wrap의 역 방향으로 여러 줄로 묶음 (여러줄에 걸쳐 표시)
4. justify-content
주 축(main-axis)의 정렬 방법을 설정.
- flex-start : Items를 시작점(flex-start)으로 정렬 default값
- flex-end:Items를 끝점(flex-end)으로 정렬
- center : Items를 가운데 정렬
- space-between : 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬
- space-around : Items를 균등한 여백을 포함하여 정렬
5. align-content
교차 축(cross-axis)의 정렬 방법을 설정.
⭐ flex-wrap 속성을 통해 Items가 여러 줄(2줄 이상)이고 여백이 있을 경우만 사용.
- stretch - Container의 교차 축을 채우기 위해 Items를 늘림 default((속성 width 혹은 height)가 값이 auto(기본값)일 경우 교차 축을 채우기 위해 자동으로 늘어남)
- flex-start - Items를 시작점(flex-start)으로 정렬
- flex-end - Items를 끝점(flex-end)으로 정렬
- center - Items를 가운데 정렬
- space-between - 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
- space-around - Items를 균등한 여백을 포함하여 정렬
⭐ Items가 한 줄일 경우 align-items 속성을 사용.
6. align-items
교차 축(cross-axis)에서 Items의 정렬 방법을 설정합니다.
⭐ Items가 flex-wrap을 통해 여러 줄(2줄 이상)일 경우에는 align-content 속성이 우선 -> align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 함.
- stretch - Container의 교차 축을 채우기 위해 Items를 늘림 default
- flex-start - Items를 각 줄의 시작점(flex-start)으로 정렬
- flex-end - Items를 각 줄의 끝점(flex-end)으로 정렬
- center - Items를 가운데 정렬
- baseline - Items를 문자 기준선에 정렬
7.align-self
교차 축(cross-axis)에서 개별 Item의 정렬 방법을 설정.
align-items는 Container 내 모든 Items의 정렬 방법을 설정한다. 필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우 align-self를 사용 !
이 속성은 align-items 속성보다 우선순위를 갖는다
- auto - Container의 align-items 속성을 상속받음 auto
- stretch - Container의 교차 축을 채우기 위해 Item을 늘림
- flex-start - Item을 각 줄의 시작점(flex-start)으로 정렬
- flex-end - Item을 각 줄의 끝점(flex-end)으로 정렬
- center - Item을 가운데 정렬
- baseline - Item을 문자 기준선에 정렬
