FLEX 레이아웃
•
미리보기
•
개념
•
핵심요소
•
실습예제
•
Quiz
미리보기
Flex 레이아웃을 바로 사용해보면서 더 쉽게 알아볼까요?
개념
Flex Layout 은 Flexible Box Layout 을 말하며, 말 그대로 유연한 박스 레이아웃입니다.
박스(Container) 안에서 요소(item)들을 1차원으로 유연하게 배치하는 것을 쉽게 해줍니다.
Flex 레이아웃을 사용하여, 사이트의 헤더 등을 쉽게 배치할 수 있습니다.
헤더
•
로고
•
메뉴(네비게이션바)
•
유틸(로그인,회원가입)
이렇게 3개의 영역으로 각 요소들을, 로고와 유틸을 양쪽 끝에 배치하면서, 사이사이에 여백을 두고 배치하고 싶다면, 아래와 같이 display: flex; justify-content: space-between; 속성만 적용하면 쉽게 레이아웃이 적용됩니다.
header {
display: flex;
justify-content: space-between;
}
CSS
복사
핵심요소
Flex Layout 을 적용하는 핵심요소는 Container 와 Item 입니다.
•
Flex Container
•
Flex Item
Flex Container
Container 는 Item 들을 담는 영역으로, 가로 또는 세로 방향 중 어떤 방향을 메인 축으로 해서, 어떤 방식으로 배치 및 정렬할 지 정의하는 영역입니다.
Flex Container 에서는 메인 축, 교차 축이 각각 가로, 세로 중 어느 방향으로 기준이 되는 지와 메인 축, 교차 축에 각각 적용하는 속성들을 이용하여 어떤 정렬 및 배치 방식을 지정할 수 있는지를 아는 것이 중요합니다.Flex Item
Container 에 담기는 개별 요소들입니다. Item 은 개별적인 정렬 밀 배치 방식을 정의할 수 있습니다.
Flex Container 의 주요 속성
display: flex 또는 display: inline-flex 사용하여, Flex Container 로 정의합니다.
Flex Container 로 정의된 요소에 아래의 주요 속성이 활성화됩니다.속성 | 설명 |
display | Flex Container를 정의 |
flex-flow | flex-direction와 flex-wrap의 단축 속성 |
flex-direction | Flex Items의 주 축(main-axis)을 설정 |
flex-wrap | Flex Items의 여러 줄 묶음(줄 바꿈) 설정 |
justify-content | 주 축(main-axis)의 정렬 방법을 설정 |
align-content | 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상) |
align-items | 교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄) |
display: flex & display: inline-flex
속성값 | 설명 |
flex | Block 특성의 Flex Container를 정의 |
inline-flex | Inline 특성의 Flex Container를 정의 |
.container {
display: flex;
}
.container {
display: inline-flex;
}
CSS
복사
flex-direction
Flex Container 의 메인 축(row, column) 방향을 지정하는 속성
default: row
속성값 | 설명 |
row | Item 을 수평축(왼쪽에서 오른쪽으로)으로 표시 |
row-reverse | Item 을 row의 반대 축으로 표시 |
column | Item 을 수직축(위에서 아래로)으로 표시 |
column-reverse | Item 을 column의 반대 축으로 표시 |
flex-wrap
item 의 줄바꿈 여부를 지정하는 속성
default: nowrap
속성값 | 설명 |
nowrap | 모든 item 을 여러 줄로 묶지 않음(한 줄에 표시) |
wrap | Item 을 여러 줄로 묶음 |
wrap-reverse | Item 을 wrap의 역 방향으로 여러 줄로 묶음 |
flex-flow
flex-flow 은 여러 개별 속성을 한 번에 적용할 수 있는 단축 속성으로,
flex-direction 과 flex-wrap 속성을 한 번에 적용합니다.
.container {
display: flex;
flex-flow: <flex-direction> <flex-wrap>;
}
CSS
복사
•
flex-direction: row, row-reverse, column, column-reverse
•
flex-wrap: nowrap, wrap, wrap-reverse
/* flex-direction: row, flex-wrap: nowrap */
.row-nowrap {
flex-flow: row nowrap;
}
/* flex-direction: row, flex-wrap: wrap */
.row-wrap {
flex-flow: row wrap;
}
/* flex-direction: row-reverse, flex-wrap: wrap */
.row-reverse-wrap {
flex-flow: row-reverse wrap;
}
/* flex-direction: column, flex-wrap: nowrap */
.column-nowrap {
flex-flow: column nowrap;
}
/* flex-direction: column, flex-wrap: wrap-reverse */
.column-wrap-reverse {
flex-flow: column wrap-reverse;
}
CSS
복사
justify-content
메인 축의 정렬 및 배치 방법을 지정하는 속성
default: flex-start
속성값 | 설명 |
flex-start | item 을 시작점(flex-start)으로 정렬 |
flex-end | item 을 끝점(flex-end)으로 정렬 |
center | item 을 가운데 정렬 |
space-between | 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨 |
space-around | Item 시작점과 끝점의 좌우 여백만 작게 지정되고, item 사이의 여백은 균등하게 정렬됨 |
space-evenly | item 을 균등한 여백을 포함하여 정렬 |
align-content
교차 축의 정렬 및 배치 방법을 지정하는 속성
default: strech
•
적용 범위: 여러 줄의 Flex Item이 있을 때, 각 줄 사이의 간격을 조정합니다.
•
사용 시기: Flex Container가 여러 줄로 아이템을 배치할 때, 줄 사이 간격을 정렬하고 조정하는 데 사용됩니다. 아이템이 단일 줄이면 이 속성은 적용되지 않습니다.
속성값 | 설명 |
stretch | Container의 교차 축을 채우기 위해 item 을 늘림 |
flex-start | Item 을 시작점(flex-start)으로 정렬 |
flex-end | Item 을 끝점(flex-end)으로 정렬 |
center | Item 을 가운데 정렬 |
space-between | 시작 Item 은 시작점에, 마지막 Item 은 끝점에 정렬되고 나머지 Items 는 사이에 고르게 정렬됨 |
space-around | Item 시작점과 끝점의 좌우 여백만 작게 지정되고, item 사이의 여백은 균등하게 정렬됨 |
align-items
교차 축의 item 들의 정렬 방법 지정하는 속성
default: strech
•
적용 범위: Flex Container의 한 줄에 있는 모든 Flex Item에 적용됩니다.
•
사용 시기: 단일 줄의 아이템들이 교차 축에서 어떻게 정렬될지 설정할 때 사용합니다.
속성값 | 설명 |
stretch | Container의 교차 축을 채우기 위해 item 을 늘림 |
flex-start | item 을 각 줄의 시작점(flex-start)으로 정렬 |
flex-end | item 을 각 줄의 끝점(flex-end)으로 정렬 |
center | item 을 가운데 정렬 |
baseline | item 을 문자 기준선에 정렬 |
Flex Item 의 주요 속성
Flex Container 내부에 담긴 요소들의 개별적인 정렬 및 배치 방법을 지정하는 속성
속성 | 설명 |
order | Flex Item 의 순서를 설정 |
flex | flex-grow, flex-shrink, flex-basis의 단축 속성 |
flex-grow | Flex Item 의 증가 너비 비율을 설정 |
flex-shrink | Flex Item 의 감소 너비 비율을 설정 |
flex-basis | Flex Item 의 (공간 배분 전) 기본 너비 설정 |
align-self | 교차 축(cross-axis)에서 Item 의 정렬 방법을 설정 |
order
아이템의 순서를 지정하는 속성
default: 0
.item1 { order: 2; }
.item2 { order: 1; }
.item3 { order: 3; }
CSS
복사
flex-grow
Flex 컨테이너가 확대될 때 Flex 아이템이 남은 공간을 얼마나 차지할지를 설정하는 속성
default: 0
값이 클수록 더 많이 차지합니다..item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }
CSS
복사
item2가 item1보다 두 배의 공간을 차지합니다.
flex-shrink
Flex 컨테이너가 좁아졌을 때, 아이템이 얼마나 축소될지를 설정하는 속성
default: 1
값이 클수록 더 많이 축소됩니다..item1 { flex-shrink: 1; }
.item2 { flex-shrink: 2; }
CSS
복사
item2가 item1보다 두 배 더 많이 축소됩니다.
flex-basis
아이템의 기본 크기를 설정하는 속성
default: auto
.item { flex-basis: 150px; }
CSS
복사
이 경우, 아이템의 기본 크기는 150px로 설정됩니다.
flex
flex-grow, flex-shrink, flex-basis를 한 번에 지정하는 단축 속성
flex-grow 이외의 개별속성 생략가능
flex-basis 를 생략하면, auto 가 아니라 0 이 된다.속성 | 설명 | 기본값 |
flex-grow | Item 의 증가 너비 비율을 설정 | 0 |
flex-shrink | Item 의 감소 너비 비율을 설정 | 1 |
flex-basis | Item 의 (공간 배분 전) 기본 너비 설정 | auto |
align-self
개별 Flex 아이템의 정렬 방식을 지정하는 속성
align-items 속성은 모든 아이템에 적용되지만, align-self는 특정 아이템에만 적용됩니다.
속성값 | 설명 |
auto | Container의 align-items 속성을 상속받음 |
stretch | Container의 교차 축을 채우기 위해 Item을 늘림 |
flex-start | Item 을 각 줄의 시작점(flex-start)으로 정렬 |
flex-end | Item 을 각 줄의 끝점(flex-end)으로 정렬 |
center | Item 을 가운데 정렬 |
baseline | Item 을 문자 기준선에 정렬 |
실습예제
1.
Flex Conrainer
2.
Flex Item
Flex Conrainer
•
HTML
•
CSS
•
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex</title>
<link rel="stylesheet" href="css/flex.css">
</head>
<body>
<div class="container">
<!-- flex-direction -->
<h2>flex default</h2>
<div class="flex-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<h2>flex-direction: row;</h2>
<div class="flex-container row">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<h2>flex-direction: column;</h2>
<div class="flex-container column">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<h2>flex-direction: row-reverse;</h2>
<div class="flex-container row-reverse">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<h2>flex-direction: column-reverse;</h2>
<div class="flex-container column-reverse">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<!-- flex-wrap -->
<h2>flex-wrap: nowrap;</h2>
<div class="flex-container nowrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
</div>
<h2>flex-wrap: wrap;</h2>
<div class="flex-container wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
</div>
<h2>flex-wrap: wrap-reverse;</h2>
<div class="flex-container wrap-reverse">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
</div>
<!-- flex-flow -->
<!-- : flex-direction 과 flex-wrap 을 동시에 적용하는 속성 -->
<h2>flex-flow: row wrap;</h2>
<div class="flex-container row-wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
</div>
<!-- justify-content -->
<h2>justify-content: center;</h2>
<div class="flex-container center">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<h2>justify-content: flex-start;</h2>
<div class="flex-container start">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<h2>justify-content: flex-end;</h2>
<div class="flex-container end">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<h2>justify-content: space-between;</h2>
<div class="flex-container between">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<h2>justify-content: space-around;</h2>
<div class="flex-container around">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<h2>justify-content: space-evenly;</h2>
<div class="flex-container evenly">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<!-- align-content -->
<h2>align-content: stretch;</h2>
<div class="flex-container cross wrap content-stretch">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
<h2>align-content: flex-start;</h2>
<div class="flex-container cross wrap content-start">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
<h2>align-content: flex-end;</h2>
<div class="flex-container cross wrap content-end">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
<h2>align-content: center;</h2>
<div class="flex-container cross wrap content-center">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
<h2>align-content: space-between;</h2>
<div class="flex-container cross wrap content-between">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
<h2>align-content: space-around;</h2>
<div class="flex-container cross wrap content-around">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
<!-- align-items -->
<h2>align-items: center;</h2>
<div class="flex-container cross cross-center">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h2>align-items: flex-start;</h2>
<div class="flex-container cross wrap cross-start">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
<h2>align-items: flex-end;</h2>
<div class="flex-container cross cross-end">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h2>align-items: stretch;</h2>
<div class="flex-container cross cross-stretch">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h2>align-items: baseline;</h2>
<div class="flex-container cross cross-baseline">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<!-- 정가운데 (수평 가운데, 수직 가운데) -->
<h2>정가운데</h2>
<div class="flex-container center-center">
<div class="item">CENTER</div>
</div>
</div>
</body>
</html>
HTML
복사
•
CSS
.container {
width: 1200px;
margin: 0 auto;
border: 3px dashed orange;
}
/* flex container */
.flex-container {
display: flex;
border: 1px solid lightcoral;
}
.item {
width: 100px;
height: 100px;
margin: 20px;
padding: 20px;
font-size: 30px;
line-height: 60px;
text-align: center;
background-color: cornflowerblue;
color: white;
box-sizing: border-box;
}
/* flex-direction */
.row { flex-direction: row; }
.column { flex-direction: column; }
.row-reverse { flex-direction: row-reverse; }
.column-reverse { flex-direction: column-reverse; }
/* flex-wrap */
.nowrap { flex-wrap: nowrap; }
.wrap { flex-wrap: wrap; }
.wrap-reverse { flex-wrap: wrap-reverse; }
/* flex-flow */
.row-wrap {
flex-flow: row wrap;
/* flex-direction: row; */
/* flex-wrap: wrap; */
}
/* justify-content */
/* : 주축의 정렬방식을 지정하는 속성 */
.center { justify-content: center; }
.start { justify-content: flex-start; }
.end { justify-content: flex-end; }
.between { justify-content: space-between; }
.around { justify-content: space-around; }
.evenly { justify-content: space-evenly; }
/* 교차축 */
.cross { height: 600px; }
/* align-content */
.content-stretch { align-content: stretch; }
/* stretch - 적용될 item 의 width/height 가 auto 이어야 적용된다. */
.content-stretch .item { height: auto; }
.content-center { align-content: center; }
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
/* align-items */
.cross-center { align-items: center; }
.cross-start { align-items: start; }
.cross-end { align-items: end;}
.cross-stretch { align-items: stretch; }
.cross-stretch .item { height: auto; line-height: 100px; }
.cross-baseline { align-items: baseline; }
/* 정가운데 (수평 가운데/수직 가운데) */
.center-center {
height: 600px;
justify-content: center;
align-items: center;
}
.center-center .item { font-size: 14px; }
CSS
복사
Flex Item
•
HTML
•
CSS
•
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex-item</title>
<link rel="stylesheet" href="css/flex-item.css">
</head>
<body>
<div class="container">
<h2>order</h2>
<div class="flex-container">
<div class="item order4">1</div>
<div class="item order1">2</div>
<div class="item order2">3</div>
<div class="item order3">4</div>
<div class="item order-1">5</div>
</div>
<h2>flex-grow</h2>
<div class="flex-container">
<div class="item grow2">1</div>
<div class="item grow1">2</div>
<div class="item grow2">3</div>
</div>
<h2>flex-shrink</h2>
<div class="flex-container">
<div class="item shrink2">1</div>
<div class="item shrink1">2</div>
<div class="item shrink2">3</div>
</div>
<h2>flex-basis</h2>
<div class="flex-container">
<div class="item basis100">1</div>
<div class="item basis200">2</div>
<div class="item basis300">3</div>
</div>
<h2>flex</h2>
<div class="flex-container">
<div class="item flex1">1</div>
<div class="item flex2">2</div>
<div class="item flex1">3</div>
</div>
<h2>align-self</h2>
<div class="flex-container align-self">
<div class="item self-start">1</div>
<div class="item self-center">2</div>
<div class="item self-end">3</div>
<div class="item self-stretch">4</div>
<div class="item self-base">5</div>
</div>
<div style="height:500px;"></div>
</div>
</body>
</html>
HTML
복사
•
CSS
.container {
width: 100%;
margin: 0 auto;
border: 3px dashed orange;
}
/* container * item */
.flex-container {
display: flex;
border: 1px solid lightcoral;
}
.item {
width: 100px;
height: 100px;
margin: 20px;
padding: 20px;
font-size: 40px;
line-height: 60px;
text-align: center;
background-color: cornflowerblue;
color: white;
box-sizing: border-box;
}
/* order */
.order-1 { order: -1; }
.order1 { order: 1; }
.order2 { order: 2; }
.order3 { order: 3; }
.order4 { order: 4; }
/* flex-grow */
.grow1 { flex-grow: 1; }
.grow2 { flex-grow: 2; }
/* flex-shrink */
.shrink1 { flex-shrink: 1; width: 800px; }
.shrink2 { flex-shrink: 2; width: 800px; }
/* flex-basis */
.basis100 { flex-basis: 100px; }
.basis200 { flex-basis: 200px; }
.basis300 { flex-basis: 300px; }
/* flex */
/* [flex-grow] [flex-shrink] [flex-basis] */
.flex1 { flex: 1 1 200px; }
.flex2 { flex: 2 2 300px; }
/* align-self */
.align-self { height: 600px; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.self-stretch { align-self: stretch; height: auto; }
.self-base { align-self: baseline; }
CSS
복사
Quiz
•
간단 퀴즈 10제
Flexbox Froggy
불쌍한 개구리가 연못에 빠졌습니다. 귀찮아 죽겠지만 개구리를 연못에서 건져서 수련 잎에 올려서 구조해봅시다.
간단 퀴즈 10제
Flex 레이아웃에 대하여 이해하였는지 간단한 퀴즈를 통해 점검해봅시다.
