Flexbox

gga·2021년 10월 13일
0

HTML/CSS

목록 보기
3/5

Flexbox

반응형 웹 페이지를 구축하고 객체를 쉽게 구성하는 것을 목표로 2009년 새로운 레이아웃 시스템으로 소개되었다. 2014년 이후 대부분의 브라우저에서 지원하게 되었다. 현재는 웹 페이지의 주요 레이아웃 시스템으로 사용되고 있다.

브라우저 IE 9 이하 버전에서는 플렉스를 지원하지 않는다.

개발툴에서 보이는 flex 속성

Flexbox는 1차원 레이아웃 시스템이며, flex item이 쌓이는 방향이 main axis(주축)이다.

부모 속성(container)

display values

flex

display: flex;

flow layout에 배치될 때 블록 레벨이 된다.

inline-flex

display: inline-flex

flow layout에 배치될 때 인라인 레벨이 된다.

flex-direction: 배치 방향 설정

아이템들이 배치되는 축의 방향을 결정하는 속성이다.

flex-direction: row // 기본값

row-reverse

column

column-reverse

flex-wrap : 줄 바꿈 설정

flex-item들을 한 줄에 배치되게 할 건지, 가능한 영역 내에 여러 행으로 나누어 배치할 건지 결정하는 속성이다.

flex-wrap: nowrap // 기본값

부모의 width보다 flex-item의 길이가 더 긴 경우 넘친다.

wrap

부모의 width보다 flex-item의 길이가 더 긴 경우 부모가 자식들을 감싸 줄바꿈이 일어난다.

wrap-reverse

줄바꿈이 일어나지만, item들이 위로 쌓인다.

flex-flow

flex-directionflex-wrap을 한꺼번에 지정할 수 있는 단축 속성이다.
flex-flow: flex-direction flex-wrap; 로 표기한다.

.container {
	flex-flow: row wrap;
}

justify-content : 메인축 방향 정렬

justify-content: flex-start // 기본값

아이템들을 시작점으로 정렬한다.

flex-end

아이템들을 끝점으로 정렬한다.

center

아이템들을 가운데로 정렬한다.

space-between

첫번째 아이템을 시작점, 마지막 아이템을 끝점으로 배치하고 나머지 아이템들을 사이에 배치한다.

space-around

아이템들의 둘레(around)에 균일한 간격을 만들어 준다.

space-evenly

아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다.
⚠익스플로러와 일부 브라우저 버전에서 지원을 하지 않는다.

글보다는 아래 그림을 보는 것이 이해가 빨랐다.

align-items : 수직축 방향 정렬

align-items: stretch // 기본값

아이템들이 부모 height만큼 늘어난다.

baseline

아이템들을 기준선 기준으로 정렬한다.

baseline

center

아이템들을 가운데로 정렬한다.

flex-start

아이템들을 시작점으로 정렬한다.

flex-end

아이템들을 끝점으로 정렬한다.

자식 속성(item)

flex-basis

flex-basis: auto; // 기본값

기본값 auto는 해당 아이템의 width 값을 사용한다.
width를 따로 지정하지 않으면 content의 크기가 된다.
flex-basis 단위는 width에서 사용할 수 있는 단위와 같다.

flex-grow

flex-grow: 0; // 기본값
flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다. 0보다 큰 값이 세팅되면 원래의 크기보다 커지며 빈 공간을 메우게 된다. 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다.

flex-shrink

flex-shrink: 1; // 기본값
flex-shrink는 아이템이 flex-basis의 값보다 축소되는 정도를 결정하는 속성이다. 더 큰 flex-shrink 값을 갖는 아이템의 사이즈가 더 빨리 줄어든다.

flex

flex: flex-basis flex-grow flex-shrink; 축약형 속성이다.

order

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

https://d2.naver.com/helloworld/8540176

0개의 댓글