K-Digital Credit

Flex 컨테이너의 직계 자식 요소는 자동으로 플렉스 아이템(flex items)이 됩니다.

Flex 항목에 사용하는 CSS 속성은 다음과 같습니다.

order
flex-grow
flex-shrink
flex-basis
flex
align-self

플렉스 아이템

ex2-7.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flexbox 예제</title>
<style>
.container {
  display: flex;
  background-color: yellow;
}
.container > div {
  background-color: pink;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>플렉스 아이템</h1>
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
</body>
</html>

ex2-7.html의 실행 결과

■ order 속성

이 order속성은 flex 컨테이너 내부의 flex 항목 순서를 지정합니다.
코드의 첫 번째 플렉스 항목은 레이아웃의 첫 번째 항목으로 나타날 필요는 없습니다.
주문 값은 숫자여야 하며 기본값은 0입니다.

order 속성

ex2-8.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flexbox 예제</title>
<style>
.container {
  display: flex;
  align-items: stretch;
  background-color: green;
}
.container>div {
  background-color: orange;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>order 속성</h1>
<div class="container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>
</body>
</html>

ex2-8.html의 실행 결과

■ flex-grow 속성

이 flex-grow 속성은 플렉스 항목이 나머지 플렉스 항목에 비해 얼마나 커질지를 지정합니다.
값은 숫자여야 하며 기본값은 0입니다.

flex-grow 속성

ex2-9.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flexbox 예제</title>
<style>
.container {
  display: flex;
  align-items: stretch;
  background-color: pink;
}
.container > div {
  background-color: green;
  color: white;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>flex-grow 속성</h1>
<div class="container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>
</body>
</html>

ex2-9.html의 실행 결과

■ flex-shrink 속성

이 flex-shrink속성은 플렉스 항목이 나머지 플렉스 항목에 비해 얼마나 줄어들지를 지정합니다.
값은 숫자여야 하며 기본값은 1입니다.

flex-shrink 속성

ex2-10.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flexbox 예제</title>
<style>
.container {
  display: flex;
  align-items: stretch;
  background-color: skyblue;
}
.container>div {
  background-color: orange;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>flex-shrink 속성</h1>
<div class="container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>
</body>
</html>

ex2-10.html의 실행 결과

■ flex-basis 속성

이 flex-basis속성은 플렉스 항목의 초기 길이를 지정합니다.
다음 예는 세 번째 플렉스 항목의 초기 길이를 200픽셀로 설정합니다.

flex-basis 속성

ex2-11.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flexbox 예제</title>
<style>
.container {
  display: flex;
  align-items: stretch;
  background-color: green;
}
.container > div {
  background-color: purple;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>flex-basis 속성</h1>
<div class="container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis:200px">3</div>
  <div>4</div>
</div>
</body>
</html>

ex2-11.html의 실행 결과

■ align-self 속성

이 align-self속성은 유연한 컨테이너 내부에서 선택된 항목의 정렬을 지정합니다.
이 align-self 속성은 컨테이너의 align-items속성에 의해 설정된 기본 정렬을 재정의합니다.

align-self 속성

ex2-12.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flexbox 예제</title>
<style>
.container {
  display: flex;
  height: 200px;
  background-color: pink;
}
.container > div {
  background-color: orange;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>align-self 속성</h1>
<div class="container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>
</body>
</html>

ex2-12.html의 실행 결과

■ Flexbox 레이아웃 예

다음은 Flex 콘테이너와 아이템을 이용한 간단한 레이아웃 예입니다.

Flexbox 레이아웃 예

ex2-13.html

[18강] 반응형 | 플렉스 아이템