CSS 레이아웃

레이아웃(Layout)이란? : 구성 요소를 공간에 효과적으로 배열하는 일,  또는 그 기술
웹 요소를 올바른 장소에 배치하는 기술을 말한다.
CSS 레이아웃 기술은 형제 요소들을 가지런히 정렬할 수 있게 해주며 요소가 컨테이너 내부에 어떤 위치에 놓이게 될지 결정할 수 있다.

Flexbox

플렉스박스는 행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식을 말한다.
요소의 배치와 정렬은 플렉스 컨테이너와 플렉스 아이템간의 상호작용을 통해 결정된다.

• 플렉스 컨테이너 : 플렉스박스 방식으로 레이아웃을 결정할 요소
• 플렉스 아이템: 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소 

##

Flexbox 기본 사용법

Flexbox를 사용하기 위해서는 먼저 플렉스 컨테이너를 지정해주어야 한다 display: flex;

ul{
 display:flex;
}

Flexbox의 옵션들

- flex-direction

플렉스 컨테이너의 주축을 결정하는 속성이다. 행은 가로 축을, 열은 세로 축을 주축으로 한다

속성값	의미
row	기본값, 주축은 행이고 방향은 콘텐츠의 방향과 동일
row-reverse	주축은 행이고 방향은 콘텐츠의 방향과 반대
column	주축은 열이고 방향은 콘텐츠의 방향과 동일
column-reverse	주축은 열이고 방향은 콘텐츠의 방향과 반대

- flex-wrap

플렉스 아이템들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지를 결정하는 속성

속성값	의미
nowrap	기본값. 공간이 부족하더라도 요소를 한줄에 배치
wrap	공간 크기에 따라 요소가 여러 행에 걸쳐 배치
wrap-reverse	wrap과 동일하나 요소 나열되는 시작점과 끝점이 반대

- justify-content

플렉스아이템들이 플렉스박스 주축을 따라 배치될 때, 요소 사이의 공간을 분배하는 방식을 결정

속성값	의미
flex-start	주축의 시작점으로부터 끝점을 향해 배치
flex-end	주축의 끝점으로부터 시작점을 향해 배치
center	주축의 중심부에 배치
space-between	주축에서 일정한 간격을 둔 채 양끝 정렬 배치
space-around	모든 요소가 동일한 여백을 갖도록 배치
space-evenly	모든 요소 사이의 간격을 동일하게 유지해 배치

- align-items 

플렉스 컨테이너의 교차축 위에서 플렉스아이템들이 어떤 식으로 정렬될 것인지를 스스로 결정

속성값	의미
stretch	플렉스아이템이 교차축 길이에 맞춰 늘어남, but 너비 or 높이가 우선
flex-start	교차축의 시작점으로부터 끝점을 향해 배치
flex-end	교차축의 끝점으로부터 시작점을 향해 배치
center	교차축의 중심부에 배치

- align-self

각각의 플렉스아이템이 교차축에서 어떤 식으로 정렬될 것인지를 스스로 결정

속성값	의미
stretch	플렉스아이템이 교차축 길이에 맞춰 늘어남, but 너비 or 높이가 우선
flex-start	교차축의 시작점으로부터 끝점을 향해 배치
flex-end	교차축의 끝점으로부터 시작점을 향해 배치
center	교차축의 중심부에 배치

- align-content

교차축 위에서 justify-content와 동일하게 사용할 수 있는 속성, 다음 두 조건이 만족되면서 여유 공간이 있을 때만 동작할 수 있다 - 아이템을 배치하기 위해 필요한 공간보다 플렉스 컨테이너가 더 클 때  - flex-wrap의 값이 wrap으로 지정되어 있을 때

- flex-grow

플렉스아이템이 기본 크기보다 더 커질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성

속성값	의미
숫자	음수는 허용되지 않는다. 양의 정수, 양의 실수 가능

- flex-shrink

플렉스아이템이 기본 크기보다 더 작아질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성

속성값	의미
숫자	음수는 허용되지 않는다. 양의 정수, 양의 실수 가능

- flex-basis 

플렉스아이템 초기 크기를 지정한다. box-sizing이 따로 설정되지 않은 경우, 콘텐츠 박스의 크기를 결정하게 된다. 기본값은 auto이다

속성값	의미
단위가 있는 값	width 속성을 정의할 때와 동일한 방식

- flex

flex는 flex-grow, flex-shrink, flex-basis 세 가지 속성을 정의할 수 있는 단축 속성이다(순서대로)**

.item{
  flex: 0 0 200px;
}