flex박스

flex는 두 가지 요소로 이루워져 있습니다.

flex container은 flex itex을 포함한 부모 역할을 합니다.
박사가 늘어나는 방향(flex-direction)과 박스가 다음 줄로 넘어가는 방식 (flex-wrap)을 정합니다. flex 아이템을 정렬(align-item, justify-content)하는 것이 flex container의 역할입니다.

flex item은 flex container 안에 위치하면서 박스 하나 하나의 모양을 결정합니다. 박스의 크기(flex-basis)와 그 크기가 변경되는 방식(flex-grow, flex-shrink)을 정의 할 수 있습니다.

그리드 레이아웃 만들기

행(row)

먼저 .row클래스로 flex container를 정희합니다. display속성에 flex값을 사용하면 flex container를 만들 수 있습니다.

.row {
	display: flex;
}

flex container는 안에 요소가 늘어나면 한 줄로 늘여 세웁니다.
자식 요소가 다음 줄로 넘어가는 것은 flex-wrap속성입니다.

.row {
	display: flex;
    flex-wrap: wrap;
}

플렉스 컨테이너 안에 있는 요소가 늘어나 컨테이너 너비를 넘어가면 다음 줄로 배치합니다.

열(column)

.row가 flex container 였다면 .col은 자식 요소인 flex item으로 만들어 볼 수 있씁니다. 행이 열을 포함하듯 flex container가 flex item을 포함하니까 중첩 구조가 맞습니다.

flex container의 자식요소는 자동으로 flex item이 되는데 기본적으로 자식요소는 컨텐츠 크기만큼 공간을 할당합니다. 열을 행에 꽉 차게 만들고 싶을 때 flex-grow속성을 이용합니다.

flex-grow는 flex item이 flex container 안에서 차지하는 크기의 정도를 나타내는데 기본값이 0입니다. 1로 설정하면 컨테이너의 크기만큼 꽉찬 아이템을 그릴 수 있습니다.

.col {
	flex-basis: 0;
    flex-grow: 1;
}

아이템 크기를 지정할 수도 있어야 하는데 flex-basis속성을 사용합니다. 아이템의 초기 크기를 지정하는데 이것을 50% 값으로 설정하면 부모인 flex container 너비의 절반인 크기를 갖습니다.

.col-6 {
	flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 50%;
}

flex-basis아이템 크기를 지정했다면 늘어나는 정도를 정하는 flex-grow와 flex-shrink속성의 값을 0으로 주어 변동되지 않도록 고정해야합니다.

.col-6 {
flex: 0 0 50%;
}

아이템 크기와 관련된 이 세 개 속성은 하나의 축약 표현을 많이 사용하는데 flex속성에 flex-grow, flex-shrink, flex-basis값을 순서대로 지정합니다.