티스토리 뷰

부트캠프/Front

[CSS] Flexbox

혀니hyun 2025. 3. 7. 19:43

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
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/07   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함