CSS

Flexbox

Flexbox는 하나의 Flex container 여러개의 Flex item들로 구성된다.
display : flex 스타일을 적용하게 되면, 외부 요소가 flex container 내부 요소가 flex item으로 설정된다.

Flex Direction

flex-direction은 flex item들의 방향을 설정하기 위해 사용한다.
row(default), column, row-reverse, column-reverse가 존재한다.

Flex Wrap

flex-wrap은 item요소들의 크기가 container보다 커졌을 때 줄바꿈을 어떻게 할지 설정하기 위해 사용한다.
nowrap(default) : container 밖으로 아이템이 삐져 나간다.
wrap : 줄바꿈이 일어난다.
wrap-reverse : 줄바꿈이 일어나고, 아이템을 역순으로 배치한다.

Flex Flow

flex-flow는 flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이다.
사용법은 단순히 flex-direction과 flex-wrap의 속성을 둘 다 넣어주면 된다.

Justify Content

justify-content는 메인축 방향으로 item을 정렬하는 속성이다.
flex-start(default) : 시작점을 기준으로 item을 정렬한다.
flex-end : 끝점을 기준으로 item을 정렬한다.
cent : 중앙을 기준으로 item을 정렬한다
space-between : item들 사이에 균일한 간격을 두고 정렬한다.
space-around : item들의 둘레에 균일한 간격을 두고 정렬한다.
space-evenly : item들 사이와 양 끝에 균일한 간격을 두고 정렬한다.

Align Items

algin-items는 수직축 방향으로 아이템들을 정렬하는 속성이다.
stretch(default) : item들이 수직축 방향으로 끝까지 늘어난다.
flex-start : item들이 시작점으로 정렬된다.
flex-end : item들이 끝점으로 정렬된다.
center : item들이 중앙 정렬된다.
.cf) align-items와 justify-content를 모두 center로 하면 container의 한 가운데에 아이템들이 배치된다.
baseline : 베이스라인을 기준으로 item들을 정렬한다.

Align Self

Align Items의 아이템 버전이라고 보면 된다. auto를 default값으로 가지며, align-items의 설정을 상속받는다. 전체 설정이 아닌 아이템별로 개별로 속성을 지정하는 algin-items라고 보면 된다.

Order

아이템들의 배치 순서를 변경하기 위한 속성이다. 속성으로 숫자값이 들어가며, 숫자가 낮을수록 먼저 배치된다.

Flex Basis

flex-basis는 item들의 기본 크기를 설정한다. width를 설정하지 않은 item들이 자신의 컨턴츠의 크기만큼 width를 할당 받지만, flex-basis값을 할당해주면 해당 크기보다 작아지지 않는다.

Flex Grow

flex-grow는 item이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다.
일단 0보다 큰 비율이 들어가면 들어간 요소끼리 n의 비율만큼 크기가 지정된다.
ex)

.item1 {
	flex-grow:1;
}
.item2 {
	flex-grow:2;
}

이면, item1과 item2의 크기가 1:2가 된다.

Flex Shrink

flex-shrink는 flex-grow와 쌍을 이루는 속성으로 basis보다 작아질 수 있는지 결정하는 속성이다.

https://flexboxfroggy.com/ Flex box를 연습해 볼 수 있는 사이트.