이전에는 flexbox 와 구성요소에 대해서 알아보았습니다.
이제 그 구성요소들을 어떻게 다루는지에 대해 알아보도록 하겠습니다.
주축의 방향을 지정해주는 flex-direction
flex-direction 속성은 주축의 방향을 지정해주는 옵션입니다.
주 축을 가로로 설정하려면 row, 세로로 설정하려면 column으로 설정합니다.
예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.main-container{
width: 500px;
height: 300px;
margin: 0 auto;
}
.flex-container{
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
border: 2px solid black;
}
.item{
width: 150px;
height: 100px;
border: 3px solid black;
font-size: 20px;
font-weight: bolder;
color: white;
}
.row{
flex-direction: row;
}
.column{
flex-direction: column;
}
</style>
</head>
<body>
<h2> default </h2>
<div class="main-container">
<div class="flex-container">
<div class="item" style="background-color: red;"> item1 </div>
<div class="item" style="background-color: blue;"> item2 </div>
<div class="item" style="background-color: green;"> item3 </div>
</div>
</div>
<h2> row </h2>
<div class="main-container">
<div class="flex-container row">
<div class="item" style="background-color: red;"> item1 </div>
<div class="item" style="background-color: blue;"> item2 </div>
<div class="item" style="background-color: green;"> item3 </div>
</div>
</div>
<h2> column </h2>
<div class="main-container">
<div class="flex-container column">
<div class="item" style="background-color: red;"> item1 </div>
<div class="item" style="background-color: blue;"> item2 </div>
<div class="item" style="background-color: green;"> item3 </div>
</div>
</div>
</body>
</html>felx-direction : default, row, column 세가지 경우의 예시 코드입니다.
실행 결과
default
row
column
위 결과와 같이 3가지 경우에 따라 배치가 달라집니다.
flexbox의 정렬방법, justify-content 와 align-items
주축과 교차축에 대한 정렬방법 또한 존재합니다.
주축방향을 정렬하기 위해서는 justify-content,
교차축방향을 정렬하기 위해서는 align-items 를 사용합니다.
예를 들어, flex-direction: row인 경우
가로축 정렬을 위해서는 justify-content를, 세로축 정렬을 위해서는 align-items를 사용합니다.
flex-direction: column인 경우 반대로
세로축 정렬을 위해서는 justify-content를, 가로축 정렬을 위해서는 align-items를 사용합니다.
justify-content와 align-items 모두 start, center, end 세가지 옵션을 통해 한쪽으로 정렬할 수 있으며
justify-content같은경우 space-between, space-around, space-evenly 를 통해 아이템끼리 간격을 넓힐 수도 있습니다.
space-between : 양 끝의 거리를 0으로 설정한 뒤, item들의 간격을 동일하게 합니다.
space-around : item 들의 좌,우 여백을 동일하게 설정합니다. 따라서 양끝의 여백은 item 사이 간격의 1/2가 됩니다.
space-evenly : item들의 간격과 좌,우 여백 간격을 동일하게 설정합니다.
justify-content
start
center
end
space-between
space-around
space-evenly
align-items
start
center
end
'웹 프론트 엔드 정리본' 카테고리의 다른 글
| 화면구성하기 - grid template : rows,columns,areas (0) | 2024.10.16 |
|---|---|
| 화면 구성하기 - grid (0) | 2024.10.14 |
| 화면 구성하기 - FlexBox 모델 (0) | 2024.10.09 |
| css 알아보기 - 선택자 : 선택자 중첩 (0) | 2024.10.08 |
| css 알아보기 - 선택자 : 가상요소 선택자 (0) | 2024.10.07 |
