공부방
CSS FlexBox 본문
Flexbox
- Flexible Box module은 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 설계
- 주요 개념
- Main Axios(주축), Cross Axios(교차축)
- 시작선(start), 끝선(end)
- Container와 item
Flex container
- display: flex-> block성격의 container
- display: inline-flex; ->inline 성격의 container
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>flexbox</title>
<style>
body {
font-size: 25px;
}
.container {
width: 1000px;
margin: 30px auto;
}
.flex-inline,
.flex-block {
background: rgb(7, 7, 7);
color: white;
}
.flex-inline > *,
.flex-block > * {
margin: 30px;
border: 1px solid black;
}
.flex-inline {
/* inline 성격의 flex */
display: inline-flex;
}
.flex-block {
/* block 성격의 flex */
display: flex;
}
</style>
</head>
<body>
<div class="container">
<h2>display: inline-flex</h2>
<span>시작</span>
<div class="flex-inline">
<div>inline-flex</div>
</div>
<span>끝</span>
<h2>display: flex</h2>
<span>시작</span>
<div class="flex-block">
<div>flex</div>
</div>
<span>끝</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>flexbox</title>
<link rel="stylesheet" href="style.css" />
<style>
.flex-container {
display: flex;
/* flex-direction: row; */
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
}
</style>
</head>
<body>
<div class="container">
<h2>flex-direction : row | column | row-reverse | column-reverse</h2>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>flexbox</title>
<link rel="stylesheet" href="style.css" />
<style>
.flex-container {
display: flex;
/* 기본값 */
/* flex-direction: row; */
/* flex-wrap: nowrap; */
/* flex-wrap: wrap; */
flex-wrap: wrap-reverse;
}
</style>
</head>
<body>
<div class="container">
<h2>flex-wrap : nowrap | wrap | wrap-reverse</h2>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>flexbox</title>
<link rel="stylesheet" href="style.css" />
<style>
.flex-container {
display: inline-flex;
flex-flow: column-reverse wrap-reverse;
}
</style>
</head>
<body>
<div class="container">
<h2>flex-flow : flex-direction flex-wrap</h2>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>justify-content(진행축의 정렬)</title>
<link rel="stylesheet" href="style.css" />
<style>
.flex-container {
display: inline-flex;
width: 800px;
flex-direction: row-reverse;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
justify-content: space-around;
/* justify-content: space-evenly; */
/* justify-content: space-between; */
}
</style>
</head>
<body>
<div class="container">
<h2>
justify-content : flex-start | flex-end | center | space-around |
space-evenly | space-between
</h2>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>교차축 정렬</title>
<link rel="stylesheet" href="style.css" />
<style>
.flex-container {
display: inline-flex;
flex-flow: row wrap;
/* align-items: stretch; */
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
/* align-items: baseline; */
}
.flex-container > div {
width: 54px;
/* height: auto; */
/* min-height: 80px; */
}
div.big-font {
font-size: 80px;
}
</style>
</head>
<body>
<div class="container">
<h2>align-items: stretch | flex-start | flex-end | center | baseline</h2>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div class="big-font">3</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>
</html>Flex Item
- order : item의 배치 순서 제어
- flex-basis : item의 너비를 지정
- flex-grow : item의 팽창 제어
- flex-shrink : item의 수축 제어
- flex : flex-grow, flex-shrink, flex-basis의 속성을 단축 지정
- align-self : 특정 item의 교차축 정렬을 제거
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>flexbox</title>
<link rel="stylesheet" href="style.css" />
<style>
.flex-container {
display: flex;
flex-direction: row;
}
.flex-container > div:nth-child(2) {
order: 2;
}
.flex-container > div:nth-child(3) {
order: -2;
}
.flex-container > div:nth-child(4) {
order: 5;
}
</style>
</head>
<body>
<div class="container">
<h2>order: 기본(0), 숫자</h2>
<div class="flex-container">
<div>1<br />(0)</div>
<div>2<br />(2)</div>
<div>3<br />(-2)</div>
<div>4<br />(5)</div>
<div>5<br />(0)</div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>flexbox</title>
<link rel="stylesheet" href="style.css" />
<style>
.flex-container {
display: flex;
flex-direction: row;
}
.flex-container > div:nth-child(2) {
order: 2;
}
.flex-container > div:nth-child(3) {
order: -2;
}
.flex-container > div:nth-child(4) {
order: 5;
}
</style>
</head>
<body>
<div class="container">
<h2>order: 기본(0), 숫자</h2>
<div class="flex-container">
<div>1<br />(0)</div>
<div>2<br />(2)</div>
<div>3<br />(-2)</div>
<div>4<br />(5)</div>
<div>5<br />(0)</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>flexbox</title>
<link rel="stylesheet" href="style.css" />
<style>
.flex-container {
width: 1000px;
height: 300px;
display: flex;
flex-direction: row;
}
.flex-container > div:nth-child(2) {
flex-grow: 1;
}
.flex-container > div:nth-child(3) {
flex-grow: 9;
}
/* 1대9로 나눠 채운다 */
</style>
</head>
<body>
<div class="container">
<h2>flex-grow: 기본(0), 음수 안됨, 양수 가능</h2>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>flexbox</title>
<link rel="stylesheet" href="style.css" />
<style>
.flex-container {
width: 300px;
height: 300px;
display: flex;
flex-direction: row;
}
/* .flex-container > div:nth-child(2) {
flex-shrink: 0;
2번째에 0을 선언해 2는 줄어들지 않고 나머지 1,3,4,5는 1:1:1:1비율로 줄어듦
} */
.flex-container > * {
width: 150px;
flex-shrink: 0;
}
/* 0으로 바꾸면서 *속성으로 모든 속성값들이 줄어들지 않는다. */
</style>
</head>
<body>
<div class="container">
<h2>flex-shrink: 기본(1)</h2>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>flexbox</title>
<link rel="stylesheet" href="style.css" />
<style>
.flex-container {
display: flex;
flex-direction: row;
width: 800px;
height: 300px;
}
.flex-container > * {
flex: 0 1 200px;
}
</style>
</head>
<body>
<div class="container">
<h2>flex: flex-grow, flex-shrink, flex-basis</h2>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>flexbox</title>
<link rel="stylesheet" href="style.css" />
<style>
.flex-container {
display: flex;
flex-direction: row;
align-items: center;
}
.flex-container > div {
height: auto;
min-height: 80px;
}
.flex-container > div:nth-child(3) {
/* align-self: auto; */
align-self: stretch;
/* align-self: flex-start; */
/* align-self: flex-end; */
/* align-self: center; */
}
</style>
</head>
<body>
<div class="container">
<h2>align-self: auto | stretch | flex-start | flex-end | center</h2>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>
</html>
'css/기본 문법' Related Articles
more
