<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>여러 줄일 때 교차축에서 플렉스 항목 간의 간격 지정하기 </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
float:left;
width:200px;
height:150px;
display:flex;
flex-flow:row wrap; /*왼쪽에서 오른쪽, 여러줄 표시*/
border:1px solid #222;
background-color:#eee;
margin:30px;
}
#opt1 {
align-content:flex-start;
/*교차축 시작점 기준*/
}
#opt2 {
align-content:flex-end;
/*교차축 끝점 기준*/
}
#opt3 {
align-content:center;
/*교차점 중앙 기준*/
}
#opt4 {
align-content:space-between;
/*시작점과 끝점에 배치한 뒤 중간 항목은 같은간격으로 배치*/
}
#opt5 {
align-content: space-around;
/*전체 항목을 같은 간격으로 배치 */
}
#opt6 {
align-content: strecth;
/*항목을 늘려 교차축에 가득 차게 배치*/
}
.box {
width:80px;
background-color:#222;
border:1px dotted #e9e9e9;
}
p{
color:#fff;
text-align:center;
}
</style>
</head>
<body>
<div class="container" id="opt1">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
<div class="container" id="opt2">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
<div class="container" id="opt3">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
<div class="container" id="opt4">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
<div class="container" id="opt5">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
<div class="container" id="opt6">
<div class="box"><p>1</p></div>
<div class="box"><p>2</p></div>
<div class="box"><p>3</p></div>
<div class="box"><p>4</p></div>
</div>
</body>
</html>
'css' 카테고리의 다른 글
| 12장 예제- 그리드 박스에서 칼럼과 줄 지정하기 (0) | 2023.04.04 |
|---|---|
| 12장 예제 - 플렉스 박스 레이아웃을 사용해 화면 중앙에 배치하기 (0) | 2023.04.04 |
| 12장 예제- 플렉스 박스에서 특정 항목만 정렬 방법 지정하기 (0) | 2023.04.04 |
| 12장 예제 - 플렉스 박스에서 교차축 정렬 방법 지정하기 (0) | 2023.04.04 |
| 12장 예제 - 주축에서 플렉스 항목 간의 간격 적용하기 (0) | 2023.04.04 |
