반응형 웹 페이지를 구축하고 객체를 쉽게 구성하는 것을 목표로 2009년 새로운 레이아웃 시스템으로 소개되었다. 2014년 이후 대부분의 브라우저에서 지원하게 되었다. 현재는 웹 페이지의 주요 레이아웃 시스템으로 사용되고 있다.
브라우저 IE 9 이하 버전에서는 플렉스를 지원하지 않는다.
개발툴에서 보이는 flex
속성
Flexbox는 1차원 레이아웃 시스템이며, flex item
이 쌓이는 방향이 main axis
(주축)이다.
display: flex;
flow layout에 배치될 때 블록 레벨이 된다.
display: inline-flex
flow layout에 배치될 때 인라인 레벨이 된다.
아이템들이 배치되는 축의 방향을 결정하는 속성이다.
flex-item
들을 한 줄에 배치되게 할 건지, 가능한 영역 내에 여러 행으로 나누어 배치할 건지 결정하는 속성이다.
부모의 width
보다 flex-item
의 길이가 더 긴 경우 넘친다.
부모의 width
보다 flex-item
의 길이가 더 긴 경우 부모가 자식들을 감싸 줄바꿈이 일어난다.
줄바꿈이 일어나지만, item
들이 위로 쌓인다.
flex-direction
과 flex-wrap
을 한꺼번에 지정할 수 있는 단축 속성이다.
flex-flow: flex-direction flex-wrap;
로 표기한다.
.container {
flex-flow: row wrap;
}
아이템들을 시작점으로 정렬한다.
아이템들을 끝점으로 정렬한다.
아이템들을 가운데로 정렬한다.
첫번째 아이템을 시작점, 마지막 아이템을 끝점으로 배치하고 나머지 아이템들을 사이에 배치한다.
아이템들의 둘레(around)에 균일한 간격을 만들어 준다.
아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다.
⚠익스플로러와 일부 브라우저 버전에서 지원을 하지 않는다.
글보다는 아래 그림을 보는 것이 이해가 빨랐다.
아이템들이 부모 height
만큼 늘어난다.
아이템들을 기준선 기준으로 정렬한다.
baseline
아이템들을 가운데로 정렬한다.
아이템들을 시작점으로 정렬한다.
아이템들을 끝점으로 정렬한다.
flex-basis: auto; // 기본값
기본값 auto는 해당 아이템의 width 값을 사용한다.
width를 따로 지정하지 않으면 content의 크기가 된다.
flex-basis
단위는 width
에서 사용할 수 있는 단위와 같다.
flex-grow: 0; // 기본값
flex-grow
는 아이템이 flex-basis
의 값보다 커질 수 있는지를 결정하는 속성이다. 0보다 큰 값이 세팅되면 원래의 크기보다 커지며 빈 공간을 메우게 된다. 아이템들의 flex-basis
를 제외한 여백 부분을 flex-grow
에 지정된 숫자의 비율로 나누어 가진다.
flex-shrink: 1; // 기본값
flex-shrink
는 아이템이 flex-basis
의 값보다 축소되는 정도를 결정하는 속성이다. 더 큰 flex-shrink
값을 갖는 아이템의 사이즈가 더 빨리 줄어든다.
flex: flex-basis flex-grow flex-shrink;
축약형 속성이다.
order: 0; // 기본값
flex-item
의 배치 순서를 제어하는 속성이다. 낮은 숫자를 먼저 배치하고 높은 숫자를 나중에 배치한다. 속성값으로는 양의 정수, 0, 음의 정수를 사용할 수 있다.
가장 큰 단점은 CSS 코드 자체이다. flexbox
는 코드 레이아웃을 정의하기에 직관적이지 않다. flexbox CSS를 읽고 모든 요소들이 시각적으로 어떻게 페이지에 배치되는지 이해하는 것은 어렵다.
예를 들어 아래 그림과 같이 레이아웃이 구성되었을때,
flex 기반 레이아웃은 다음과 같다.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex: 1;
}
main {
flex: 1;
padding: 0 20px;
}
nav {
flex: 0 0 180px;
padding: 0 10px;
order: -1;
}
aside {
flex: 0 0 130px;
padding: 0 10px;
}
반면 grid를 사용할 경우, css를 보고 페이지에 어떻게 배치되는지 알 수 있다.
header {
grid-row: 1;
grid-column: 1 / 4;
}
.sidebar-left {
grid-row: 2;
grid-column: 1 / 2;
}
article {
grid-row: 2;
grid-column: 2 / 3;
}
.sidebar-right {
grid-row: 2;
grid-column: 3 / 4;
}
footer {
grid-row: 3;
grid-column: 1 / 4;
}
flexbox
는 전체 페이지 레이아웃을 위해 만든 것이 아니다. 1차원 레이아웃으로 하나의 열과 행의 요소를 배치하도록 설계되었다. 2011년에 여러 행과 열을 가진 레이아웃을 처리할 수 있는 CSS grid
가 제안되었다.
1분 코딩 - 이번에야말로 CSS Flex를 익혀보자
https://studiomeal.com/archives/197
번역 공룡을 위한 모던 CSS
https://d0gf00t.tistory.com/19