티스토리 뷰
Flexbox란?
요소를 동적으로 배열하는 1차원(x축 or y축) 레이아웃. 요소를 반응형으로 만듦.
(↔ Grid: 2차원 레이아웃)
Flexbox 구성 요소

Flexbox 속성
Flex Container Properties | Flex Items Properties |
flex-direction : item 순서 방향 flex-wrap : overflow 시 줄바꿈 flex-flow : direction+wrap 통합 justify-content : item 간격 정렬 (main축) align-items : item 간격 정렬 (cross축 1줄) align-content : item 간격 정렬(cross축 2줄 이상) align-self : 특정 item만 간격 정렬 따로 설정 |
order : item 순서 우선순위 flex-grow : item 너비 자동 조정(늘임) flex-shrink : item 너비 자동 조정(줄임) flex-basis : item 기본 사이즈 지정 flex : flex-grow, shrink, basis 결합 |
Flexbox 작동 방식

Example
<div class="container">
<div class="flex-item item-1">item-1</div>
<div class="flex-item item-2">item-2</div>
<div class="flex-item item-3">item-3</div>
<div class="flex-item item-1">item-1</div>
<div class="flex-item item-2">item-2</div>
<div class="flex-item item-3">item-3</div>
<div class="flex-item item-1">item-1</div>
<div class="flex-item item-2">item-2</div>
<div class="flex-item item-3">item-3</div>
</div>
.container {
border: 3px solid lightgray;
height: 400px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
color:black;
font-size: 2rem;
padding: 1rem;
text-align: center;
}
.item-1{
background-color: aquamarine;
}
.item-2{
background-color: bisque;
}
.item-3{
background-color: lightcoral;
}

[CSS] Flexbox : Container 속성
① flex-direction : row, row-reverse, column, column-reverse② flex-wrap : wrap, wrap-reverse, nowrap ③ flex-flow : ④ justify-content : flex-start, flex-end, center, space-between, space-around, space-evenly⑤ align-items : flex-start, flex-end
hyun-eee.tistory.com
[CSS] Flexbox : Items 속성
① orderitem 순서 우선순위 설정함. 속성 값의 숫자 작을수록 우선순위 높음. 음수 허용. ② flex-grow아이템의 너비를 컨테이너 너비에 맞게 자동으로 늘림.속성 값에 비례하게 너비 조정됨.③ flex-s
hyun-eee.tistory.com
'부트캠프 > Front' 카테고리의 다른 글
[CSS] Flexbox : Items 속성 (1) | 2025.03.10 |
---|---|
[CSS] Flexbox : Container 속성 (0) | 2025.03.07 |
[CSS] Animation (0) | 2025.03.07 |
[CSS] Transform (0) | 2025.03.07 |
[HTML] Input (0) | 2025.03.07 |