1.flex
display: flex;
justify-content: space-around;
로 요소를 동적으로 변화할때 유연한 레이아웃을 구현할수있다.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container1{
display: flex;
justify-content: space-around;
margin: 10px;
padding: 15px;
border-radius: 3px;
background-color:greenyellow;
}
.flex-item{
margin:10px;
padding: 20px;
color: blue;
text-align: center;
border-radius: 3px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="flex-container1">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</body>
</html>1
2
3
4
2.Flexbox 속성
2-1.flex-direction
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container{
display: flex;
justify-content: space-around;
margin: 10px;
padding: 15px;
border-radius: 3px;
background-color:greenyellow;
}
.flex2{flex-direction: row-reverse;}
.flex3{flex-direction: column;}
.flex4{flex-direction: column-reverse;}
.flex-item{
margin:10px;
padding: 20px;
color: blue;
text-align: center;
border-radius: 3px;
background-color: aqua;
}
</style>
</head>
<body>
row(기본값)
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
row-reverse
<div class="flex-container flex2">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
column
<div class="flex-container flex3">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
column-reverse
<div class="flex-container flex4">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</body>
</html>1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
2-2.flex-wrap
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container{
display: flex;
justify-content: space-around;
margin: 10px;
padding: 15px;
border-radius: 3px;
background-color:greenyellow;
overflow: auto;
}
.wrap1{flex-wrap: wrap;}
.wrap2{flex-wrap: wrap-reverse;}
.flex-item{
margin:10px;
padding: 20px;
color: blue;
text-align: center;
border-radius: 3px;
background-color: aqua;
}
</style>
</head>
<body>
nowrap(기본값)
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
<div class="flex-item">10</div>
<div class="flex-item">11</div>
</div>
wrap
<div class="flex-container wrap1">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
<div class="flex-item">10</div>
<div class="flex-item">11</div>
</div>
wrap-reverse
<div class="flex-container wrap2">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
<div class="flex-item">10</div>
<div class="flex-item">11</div>
</div>
</body>
</html>nowrap(기본값)
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
2-3.justify-content
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container{
display: flex;
justify-content: space-around;
margin: 10px;
padding: 15px;
border-radius: 3px;
background-color:greenyellow;
overflow: auto;
}
.justi1{justify-content: flex-start;}
.justi2{justify-content: flex-end}
.justi3{justify-content:center}
.justi4{justify-content:space-between}
.justi5{justify-content:space-around}
.flex-item{
margin:10px;
padding: 20px;
color: blue;
text-align: center;
border-radius: 3px;
background-color: aqua;
}
</style>
</head>
<body>
flex-start(기본값)
<div class="flex-container justi1">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
flex-end
<div class="flex-container justi2">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
center
<div class="flex-container justi3">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
space-between
<div class="flex-container justi4">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
space-around
<div class="flex-container justi5">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</body>
</html>1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
2-4.align-items
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container{
display: flex;
justify-content: space-around;
margin: 10px;
padding: 15px;
border-radius: 3px;
background-color:greenyellow;
overflow: auto;
}
.align1{align-items: stretch;height: 200px;}
.align2{align-items: flex-start;height: 200px;}
.align3{align-items: flex-end;height: 200px;}
.align4{align-items: center;height: 200px;}
.align5{align-items: baseline;height: 200px;}
.flex-item{
margin:10px;
padding: 20px;
color: blue;
text-align: center;
border-radius: 3px;
background-color: aqua;
}
</style>
</head>
<body>
stretch
<div class="flex-container align1">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
flex-start
<div class="flex-container align2">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
flex-end
<div class="flex-container align3">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
center
<div class="flex-container align4">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
baseline
<div class="flex-container align5">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
</body>
</html>1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
2-5.align-content
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container{
display: flex;
justify-content: space-around;
margin: 10px;
padding: 15px;
border-radius: 3px;
background-color:greenyellow;
overflow: auto;
}
.flex2{flex-direction: row-reverse;}
.flex3{flex-direction: column;}
.flex4{flex-direction: column-reverse;}
.wrap1{flex-wrap: wrap;}
.wrap2{flex-wrap: wrap-reverse;}
.justi1{justify-content: flex-start; }
.justi2{justify-content: flex-end}
.justi3{justify-content:center}
.justi4{justify-content:space-between}
.justi5{justify-content:space-around}
.align1{align-items: stretch;height: 200px;}
.align2{align-items: flex-start;height: 200px;}
.align3{align-items: flex-end;height: 200px;}
.align4{align-items: center;height: 200px;}
.align5{align-items: baseline;height: 200px;}
.aligncontent1{align-content: stretch;height: 300px;}
.aligncontent2{align-content: flex-start;height: 300px;}
.aligncontent3{align-content: flex-end;height: 300px;}
.aligncontent4{align-content: center;height: 300px;;}
.aligncontent5{align-content: space-between;height: 300px;}
.aligncontent6{align-content: space-around;height: 300px;}
.flex-item{
margin:10px;
padding: 20px;
color: blue;
text-align: center;
border-radius: 3px;
background-color: aqua;
}
</style>
</head>
<body>
stretch
<div class="flex-container align1">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
flex-start
<div class="flex-container align2">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
flex-end
<div class="flex-container align3">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
center
<div class="flex-container align4">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
baseline
<div class="flex-container align5">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
stretch
<div class="flex-container wrap1 flex3 aligncontent1">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
<div class="flex-item">10</div>
<div class="flex-item">11</div>
<div class="flex-item">12</div>
</div>
flex-start
<div class="flex-container wrap1 flex3 aligncontent2">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
<div class="flex-item">10</div>
<div class="flex-item">11</div>
<div class="flex-item">12</div>
</div>
flex-end
<div class="flex-container wrap1 flex3 aligncontent3">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
<div class="flex-item">10</div>
<div class="flex-item">11</div>
<div class="flex-item">12</div>
</div>
center
<div class="flex-container wrap1 flex3 aligncontent4">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
<div class="flex-item">10</div>
<div class="flex-item">11</div>
<div class="flex-item">12</div>
</div>
space-between
<div class="flex-container wrap1 flex3 aligncontent5">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
<div class="flex-item">10</div>
<div class="flex-item">11</div>
<div class="flex-item">12</div>
</div>
space-around
<div class="flex-container wrap1 flex3 aligncontent6">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
<div class="flex-item">10</div>
<div class="flex-item">11</div>
<div class="flex-item">12</div>
</div>
</body>
</html>stretch
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
3.flexbox-item 속성
3-1.order
배치 순서
3-2.flex-grow
상대적 너비
3-3.flex-shrink
기본 너비값
🎈참고자료
https://poiemaweb.com/css3-flexbox
반응형
'FrontEnd > css' 카테고리의 다른 글
| [CSS] 수평/수직 정렬 (0) | 2024.06.13 |
|---|---|
| [CSS] 반응형 레이아웃 (1) | 2024.06.12 |
| [CSS] 레이아웃 (0) | 2024.06.12 |
