css flex

<div class="container>
	<div class="item">AAA</div>
    <div class="item">BBB</div>
    <div class="item">CCC</div>
</div>

부모요소인 .container를 flex container라 부르고
자식요소인 .item을 flex item 이라 부른다.

1. flex container에 적용하는 속성들

.container{
	 display: flex;  
    /* display: inline-flex; */
    }

2. 배치방향 설정 flex-direction

.container {
	flex-direction: row;
	/* flex-direction: column; */
	/* flex-direction: row-reverse; */
	/* flex-direction: column-reverse; */
}

row

플렉스 컨테이너의 주축이 글의 작성 방향과 동일합니다. 주축의 시작점과 끝점이 콘텐츠 방향과 동일합니다.

row-reverse

row와 동일하게 동작하지만 시작점과 끝점이 반대에 위치합니다.

column

플렉스 컨테이너의 주축이 블록 축과 동일합니다. 주축의 시작점과 끝점이, 글 작성 모드의 이전 지점 및 이후 지점과 동일합니다.

column-reverse

column과 동일하게 동작하지만 시작점과 끝점이 반대에 위치합니다.

3. flex-wrap

.container {
	flex-wrap: nowrap;
	/* flex-wrap: wrap; */
	/* flex-wrap: wrap-reverse; */
}

nowrap

기본 설정값으로, flex-container 부모요소 영역을 벗어나더라도 flex-item 요소들을 한 줄에 배치합니다. 시작점은 flex-direction 에 의해 결정된 방향으로 적용됩니다.

wrap

flex-item 요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐서 배치됩니다. nowrap 속성과 마찬가지로 요소가 배치되는 시작점은 flex-direction 에 의해 결정됩니다. 일반적으로 위에서 아래로 쌓이는 순서입니다.

wrap-reverse

wrap 속성값과 동일하지만, 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치됩니다.

4.flex-flow

flex direction , flex wrap 을 동시에 설정할 수 있는 속성

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}

main axis(주축) : justify
cross axis(수직축) : align

5. justify-content & align-items

.container {
	justify-content: flex-start;
	/* justify-content: flex-end; */
	/* justify-content: center; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
}

flex-start

(아무것도 지정하지 않았을 때 적용되는)초기 값이며 이 값을 지정하면 flex 항목 행 내의 항목들은 flex 컨테이너의 시작선에서 부터 정렬됩니다.

flex-end

flex 항목 행의 마지막 항목이 flex 컨테이너의 끝선에서 정렬됩니다.

center

flex 항목들이 flex 항목 행의 가운데 정렬됩니다.

space-between

주죽 방향 여유 공간을 flex 항목 사이의 공간에 균등 배분합니다.

space-around

시작선 및 끝선과 flex 항목간 공간도 균등 배분에 고려하므로 시작선 및 끝선과 flex 항목 간의 공간의 크기를 1로 배분한다면 flex 항목 사이의 공간은 2로 배분합니다.

space-evenly

지정하면 여유 공간을 flex 항목 사이의 공간 및 시작선 및 끝선과 flex 항목 간의 공간에 모두 균등하게 배분합니다.

.container {
	align-items: stretch;
	/* align-items: flex-start; */
	/* align-items: flex-end; */
	/* align-items: center; */
	/* align-items: baseline; */
}

stretch

(아무것도 지정하지 않았을 때 적용되는)초기 값이며 이 값을 지정하면 flex 항목의 높이는 flex 컨테이너 내 flex 항목 행의 최대 높이로 지정됩니다.
따라서, flex 항목 행이 하나 일 때는 flex 항목은 교차축 방향으로 flex 컨테이너를 가득 채우게 됩니다.

flex-start

flex 항목의 첫 열이 교차축 방향의 시작선에 정렬됩니다.

flex-end

flex 항목의 첫 열이 교차축 방향의 끝선에 정렬됩니다.

center

flex 항목 행에 배분된 공간의 가운데 라인에 정렬됩니다.

baseline

아이템들을 텍스트 베이스라인 기준으로 정렬합니다.