본문 바로가기
프론트엔드 개발자/CSS

flex-item 속성 flex-grow, flex-shrink , flex-basis 사용하기

by 신디블로그 2023. 4. 10.
SMALL

 

대표사진 삭제

사진 설명을 입력하세요.

 

flex-item에 설정하는 속성(아이템 크기에 영향을 줌)

 

// flex-grow : 성장

 

: 아이템전체크기보다 컨테이너가 클때

: 아이템의크기를 부모컨테이너의 크기에 맞춤

 

flex-grow:1 --> 아이템의 개수가 N개일때

1/n, 1/n, 1/n, 1/n

 

// flex-shrink : 수축

 

: 컨테이너가 아이템의 전체크기보다 작을때

: 아이템의크기를 강제로 수축시킴(컨테이너에 맞게)

 

// flex-basis : 크기 (flex-direciton의 영향을 받음)

auto: 컨텐츠의 크기만큼만 적용

 

: flex 아이템에만 사용하는 크기값

 

display:flex설정시

 

flex-grow:0

flex-shrink:1

flex-basis:auto

 

 

flex:none : 사용자가 flex item의 크기를 설정시 효과적인 옵션

grow:0 성장없음

shink:0 수축없음

basis:auto 컨텐츠크기만큼

 

 

<body>
    <h2>기본값 flex-grow:0, flex-shink:1, flex-basis:auto</h2>
    <div class="box box1">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
    </div>
    <div class="spacer"></div>
    <h2>flex-grow:1</h2>
    <div class="box box2">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
    </div>
    <div class="spacer"></div>
    <h2>flex-grow 홀수:1  짝수:2</h2>
    <div class="box box3">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
    </div>
    <div class="spacer"></div>
    <h2>flex-grow:0, flex-shrink:1</h2>
    <div class="box box4">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
    <div class="spacer"></div>
    <h2>flex:none : flex-grow:0, flex-shrink:0, flex-basis:auto</h2>
    <div class="box box5">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
    <div class="spacer"></div>
</body>
 

 

 <style>

        * {
            margin: 0;
            padding:0;
        }
        .spacer {
            height: 50px;
        }

        body {
            padding: 50px;
        }

        .box {
            border: 5px solid #fc0;
            padding:1rem;
            display: flex;
        }
        .box .item {
            padding: 0.5rem;
        }
        .box .item:nth-child(even) {
            background-color: aqua;
        }
        .box .item:nth-child(odd) {
            background-color: greenyellow
        }

        .box2 .item {
            flex-grow: 1;
            /* 
                현재 아이템 개수 = 4개
                부모의 width를 4등분 => 크기를 아이템이 서로 배분
            */
        }
        .box3 .item:nth-child(even) {
            flex-grow: 2;
        }
        .box3 .item:nth-child(odd) {
            flex-grow: 1;
        }

        /* 
            flex-grow숫자 합이 6  -          6/n
        
        */

        .box4 {
            width: 100px;
        }
        .box4 .item {
            flex-grow: 0; /* 성장없음 */
            flex-shrink: 1;
            flex-basis: 200px;
        }

        .box5 .item {
            flex:none;
            width: 25%;
            box-sizing: border-box;
        }

    </style>
 
 

 

 

LIST
저작자표시 비영리 변경금지

'프론트엔드 개발자 > CSS' 카테고리의 다른 글

GRID로 레이아웃 만들기 , GRID 완벽 분석하기 grid를 사용해보자 (2)  (0) 2023.04.18
GRID 완벽 분석하기 grid를 사용해보자 (1)  (0) 2023.04.18
CSS 애니메이션 효과 _ 카드박스 효과내기(2)  (0) 2023.04.07
CSS 애니메이션 효과 _ 카드박스 효과내기(1)  (0) 2023.04.07
CSS _ 애니메이션 다양한 효과넣기(4)  (0) 2023.04.05

관련글

댓글

티스토리툴바