※ 플렉서블 레이아웃(flex)
- 대부분의 웹 사이트는 수직 구성을 띠고 있다. 레이아웃을 구성할 때 가장 많이 이용하는 요소들은 대부분 블록개념으로 표기한다. 웹 사이트를 수직으로 구성하는 것은 쉽게 할 수 있으나, 수평으로 구성하는 것은 쉽지 않다.
과거에는 수평으로 구성하기 위해서 table, float, inline-block을 사용했지만 좀 더 쉽게 구성하기 위해서 flex를 사용한다.
flex-wrap
- 플렉스 라인에 더 이상 여유가 없을 때 플렉스 요소의 위치를 다음 줄로 넘길지 여부를 설정한다.
| nowrap | 기본 설정이다. 플렉스 요소가 다음 줄로 넘어가지 않는다. 요소의 너비를 줄여 한 줄에 모두 배치한다. |
| wrap | 플렉스 요소가 여유 공간이 없으면 다음 줄로 넘긴다. |
| wrap-reverse | 플렉스 요소가 여유 공간이 없으면 다음 줄로 넘긴다. 단, 위쪽으로 넘긴다. |
<head>
<title>flex - 1</title>
<style>
#container div {
width: 400px;
border: 1px solid black;
background-color: gold;
}
#container {
width: 900px;
height: 500px;
border: 3px solid red;
display: flex;
flex-wrap: nowrap;
/* flex-wrap: wrap;
flex-wrap: wrap-reverse; */
}
#box2 { margin-left: 20px; }
</style>
</head>
<body>
<h2>nowrap</h2>
<div id="container">
<div id="box1"><h2>1</h2></div>
<div id="box2"><h2>2</h2></div>
<div id="box3"><h2>3</h2></div>
</div>
</body>
justify-content
- 플렉스 요소의 수평방향 정렬방식을 설정한다.
| flex-start | 기본 설정이다. 앞쪽에서부터 배치된다. |
| flex-end | 뒤쪽에 맞춰서 배치된다. |
| center | 가운데에 배치된다. |
| space-between | 요소들 사이에 여유 공간을 두고 배치된다. |
| space-around | 앞, 뒤 그리고 요소들 사이에 모두 여유 공간을 두고 배치된다. |
| space-evenly | 앞, 뒤 그리고 요소들 사이에 공간을 모두 일정하게 두고 배치된다. |
<head>
<title>flex - 2</title>
<style>
.wrapper {
border: 3px solid red;
width: 500px;
height: 50px;
margin: 0 auto;
display: flex;
}
.wrapper div {
border: 2px solid black;
width: 100px;
background-color: gold;
}
#container1 { justify-content: flex-start; }
#container2 { justify-content: flex-end; }
#container3 { justify-content: center; }
#container4 { justify-content: space-between; }
#container5 { justify-content: space-around; }
#container6 { justify-content: space-evenly; }
</style>
</head>
<body>
<h3>justify-content : flex-start</h3>
<div class="wrapper" id="container1">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
<h3>justify-content : flex-end</h3>
<div class="wrapper" id="container2">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
<h3>justify-content : flex-center</h3>
<div class="wrapper" id="container3">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
<h3>justify-content : space-between</h3>
<div class="wrapper" id="container4">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
<h3>justify-content : space-around</h3>
<div class="wrapper" id="container5">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
<h3>justify-content : space-evenly</h3>
<div class="wrapper" id="container6">
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
</body>
justify-content : flex-start
1
2
3
justify-content : flex-end
1
2
3
justify-content : flex-center
1
2
3
justify-content : space-between
1
2
3
justify-content : space-around
1
2
3
justify-content : space-evenly
1
2
3
728x90
'CSS' 카테고리의 다른 글
| 국비 수업 30일 차(22.11.14.) - transform, transition (0) | 2022.11.14 |
|---|---|
| 국비 수업 29일 차(22.11.11.) - flex 2, 미디어 쿼리 (0) | 2022.11.14 |
| 국비 수업 28일 차(22.11.10.) - CSS position (0) | 2022.11.11 |
| 국비 수업 27일 차(22.11.09.) - 박스 모델 (0) | 2022.11.11 |
| 국비 수업 26일 차(22.11.08.) - CSS 텍스트 (0) | 2022.11.10 |
