FlexBox 정리

인터페이스 안 아이템 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델

즉, 레이아웃을 다룰 때 1번에 1개의 차원(행 또는 열)을 다룬다는 의미임. (2차원 모델인 Grid 레이아웃도 있음)

 

 

flex-direction 속성을 사용하여 축을 지정하며 주축(Main Axis)과 교차축(Cross Axis)으로 flexbox를 동작한다

	flex-direction 값		동작
주축	row	row-reverse	인라인 방향으로 행을 따름
	column	column-reverse	블록 방향으로 열을 따름
교차축	row	row-reverse	열 방향을 따름
	column	column-reverse	행 방향을 따름

reverse는 말그대로 시작선과 끝선을 반대로 바꾼다는 것임

주축과 교차축은 서로 수직임을 잊지 말 것

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

 

 

flex 요소를 정렬하고 끝을 맞추려면 어느 축이 어느 방향인지 알고 있어야 함

주축, 교차축을 따라 항목을 정렬하고 끝을 맞추는 각종 속성들을 적용하는 방식으로 동작함

 

 

flex 컨테이너 생성하기
display : flex;
display : inline-flex;

1. flex-direction 속성의 기본값은 row임, 즉 항목은 행으로 나열됨
2. 항목은 주착의 Start선(시작선)에서 시작
3. 항목은 주 차원 위에서 늘어나지는 않지만 줄어들 수 있음
4. 항목은 교차축의 크기를 채우기 위해 늘어남
5. flex-basis 속성은 auto (항목의 크기만큼만 크기가 지정된다는 의미)
6. flex-wrap 속성은 nowrap (주축을 기준으로 단 1줄로 표현)

기본값에 의해 항목 별 내부 요소의 크기로 주축을 따라 정렬되며, 컨테이너의 크기보다 더 많은 항목이 있을 경우 행을 바꾸지 않고 주축 방향으로 흘러 넘친다. 어떤 항목이 다른 항목들 보다 높이가 길다면 모든 항목이 제일 긴 높이에 맞춰 교차축을 따라 늘어나게 된다.

 

 

 

 

---

flex-wrap

항목이 여러 행에 나열되도록 하려면 flex-wrap : wrap으로 지정 / 반대로 한줄에 모든 항목을 나타내고 싶다면 flex-wrap : nowrap으로 지정한다. (기본값은 nowrap임.)

---

flex-flow

flex-direction과 flex-wrap 속성의 축약형

2가지의 value를 받는데 순서대로 flex-direction과 flex-wrap의 값을 적어주면 된다.

ex. flex-flow : row wrap;

 

 

---

flex-basis

항목의 크기 결정, 기본값은 auto이며 브라우저가 항목의 크기를 확인한다. 기본적으로 각 내용물의 크기만큼 공간을 차지함!!

 

---

flex-grow

주축에서 항목 크기가 주축 공간보다 작아 사용가능한 공간(여백)을 지정해준 속성값의 비율로 분배해주는 방식

이 경우 a는 flex-grow를 2로 나머지 b, c는 1씩 값을 준다면 available은 2:1:1로 a에 100px, b, c에 50px씩 분배된다.

---

flex-shrink

주축의 공간이 부족할 때 각 항목의 사이즈를 비율로 줄이는 방식

 

---

flex

flex-grow, flex-shrink, flex-basis 순서로 값을 한번에 지정하는 축약형

flex : initial	flex : 0 1 auto  flex-grow값이 0이므로 flex-basis값보다 커지지 않지만 flex-shrink값이 1이므로 flex컨테이너가 모자르면 크기가 줄어듦
flex : auto	flex : 1 1 auto  flex-grow값이 1이므로 여유공간이 있을 때 항목들이 늘어나서 여유 공간을 채움. 나머지는 위와 동일
flex : none	flex : 0 0 auto  flex컨테이너 크기 변화에도 항목은 크기가 변하지 않음.
flex : <positive-number>	flex : 1 == flex : 1 1 0  flex-grow만 지정하고 나머지 flex-shrink는 1, flex-basis는 0으로 사용한다는 의미

 

 

 

---

align-items

flex 컨테이너에서 교차축을 따라 항목의 열을 정렬하는 방식을 지정

기본값은 stretch이며, 항목의 높이는 flex컨테이너 내 항목의 행 최대 높이로 지정됨. 즉, 항목 행이 1개이면 교차축 방향으로 flex 컨테이너를 가득 채우게 된다.

 

flex-start로 지정하면 항목의 첫 열이 교차축 방향의 시작선에 정렬

flex-end는 항목의 첫 열이 교차축 방향의 끝선에 정렬됨

center는 항목 행에 배분된 공간의 가운데 라인에 정렬됨

stretch
flex-start
flex-end
center

 

 

---

justify-content

주축을 따라 flex항목의 행을 정렬하는 방식을 지정

기본값은 flex-start이며, 항목은 행 내의 flex 컨테이너의 시작선부터 정렬됨

 

stretch
flex-start
flex-end
center
space-around	시작선 및 끝선과 항목 간 공간도 균등 배분에 고려하여 시작선 및 끝선과 항목간의 공간을 1로 배분한다면 항목 사이의 공간은 2로 배분함
space-between	주축 방향 여유공간을 flex 항목 사이의 공간에 균등 배분
space-evenly	여유 공간을 항목 사이의 공간 및 시작선, 끝선과 항목간의 공간에 모두 균등 배붐