본문 바로가기
Programming/HTML & CSS & JavaScript

CSS 5일차 - FlexBox(2)

by yoon9i 2024. 4. 26.

다) flex-grow 속성
- 화면을 크게할 때 item 의 동작방식을 제어.
- flext-grow 의 기본값: 0

a. 기본동작
화면을 키우면 5번과 6번이 동시에 같은 비율로 커지거나 작아진다.
최대 350px 까지 커진다.

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>flex grow</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            font-size: 1.5rem;
        }

        html {
            background: #b3b3b3;
            padding: 5px;
        }

        body {
            background: #b3b3b3;
            padding: 5px;
            margin: 0;
        }

        .flex-container {
            background: white;
            padding: 10px;
            border: 5px solid black;

            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .item-1 {
            background: #ff7300;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
        }

        .item-2 {
            background: #ff9640;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 250px;
            font-size: 1.8rem;

        }

        .item-3 {
            background: #ff9640;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            height: 250px;
        }

        .item-4 {
            background: #f5c096;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 300px;
            height: 300px;
        }

        .item-5 {
            background: #d3c0b1;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 350px;

            flex-grow: 1;
        }

        .item-6 {
            background: #d3c0b1;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 350px;

            flex-grow: 4;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="item-4">w/h=300px</div>
        <div class="item-5">w=350px</div>
        <div class="item-6">w=350px</div>
    </div>
</body>

</html>

 

b. 설정동작
5번에 ``flext-grow: 1`` 로 지정.
화면크기를  키우면 6번은 최대 350px 까지만 커지고
5번은 350px 넘어서 계속 커진다.
이유는 ``flex-grow: 0`` 인 요소들이 모두 너비를 차지하고
남은 너비를 ``flex-grow: 1`` 인 5번이 차지하게 되어 5번은 350px
보다 더 커질수 있다.

 

b. 설정동작2
5번에 ``flext-grow: 1``로 지정하고
6번에 ``flext-grow: 4`` 로 지정.

 

화면크기를 키우면 6번은 5번보다 더 빠르게 커진다.
``flex-grow: 0`` 인 요소들이 모두 너비를 차지하고
남은 너비를 5등분하고 5번은 1/5 6번은 4/5가 차지하게 된다.

 

c. 설정동작3
``flex-wrap: wrap`` 지정
크기를 줄이면 5번이 다음라인으로 wrap 되고
이때 5번은 전체 너비를 모두 차지하게 된다.
이유는 5번 하나만 존재하기 때문에 나머지 영역을 모두 차지하게 되기 때문이다.

화면을 더 줄였을시 보여지는 화면

 

라) flex-shrink 속성
- 화면을 작게할 때 item 의 동작방식을 제어.
- flex-shrink: 1 기본값
- 컨텐츠에 필요한 공간까지만 축소됨.
- flex-shrink: 0 지정하면 축소자체가 안됨.

a. 기본동작
화면을 줄이면 5번과 6번이 동시에 같은 비율로 작이진다.
컨텐츠를 보여줄수 있는 최소크기까지만 줄어든다.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>flex shrink</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            font-size: 1.5rem;
        }

        html {
            background: #b3b3b3;
            padding: 5px;
        }

        body {
            background: #b3b3b3;
            padding: 5px;
            margin: 0;
        }

        .flex-container {
            background: white;
            padding: 10px;
            border: 5px solid black;

            display: flex;
            flex-direction: row;
            flex-wrap: nowrap
        }

        .item-1 {
            background: #ff7300;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
        }

        .item-2 {
            background: #ff9640;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 250px;
            font-size: 1.8rem;

        }

        .item-3 {
            background: #ff9640;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            height: 250px;
        }

        .item-4 {
            background: #f5c096;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 300px;
            height: 300px;
        }

        .item-5 {
            background: #d3c0b1;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 350px;

            flex-shrink: 3;
        }

        .item-6 {
            background: #d3c0b1;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 350px;

            /* 0 으로 주면 축소x */
            /* flex-shrink: 0; */
            /* 기본은 1 */
            flex-shrink: 1;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="item-4">w/h=300px</div>
        <div class="item-5">w=350px</div>
        <div class="item-6">w=350px</div>
    </div>
</body>

</html>

 

b. 설정동작1
6번은 ``flex-shrink: 0`` 지정.
화면을 줄이면 5번 및 다른 item 들은 축소되었는데 6번은 축소안됨.

 

c. 설정동작2
5번을 ``flex-shrink: 3`` 지정.
화면을 줄이면 5번이 다른 item 들 보다 거의 3배정도 빠르게 축소됨.

 

마) flex-basis 속성
- item 의 기본 크기 설정시 사용.
일반적으로 width 와 height 가 item 의 크기를 결정하지만
flex-basis 를 지정하면 width 와 height 를 덮어쓴다.
- flex-basis: auto 기본값.
- 동작방식

주축이 row ( width 고려 )
ex) flex-basis: auto; width: 300px; ===> item 의 실제 너비는 300px
     ( width 값이 적용 )
     flex-basis: 200px; width: 300px; ===> item 의 실제 너비는 200px
     ( flex-basis 값이 적용 )

주축이 column ( height 고려 )
ex) flex-basis: auto; width: 300px; ===> item 의 실제 높이는 300px
     ( height 값이 적용 )
     flex-basis: 200px; width: 300px; ===> item 의 실제 높이는 200px
     ( flex-basis 값이 적용 )

- flex-basis: % 가능 ( 화면전체 너비 / 높이 기준 )

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>flex basis1 - row & width 고려 </title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            font-size: 1.5rem;
        }

        html {
            background: #b3b3b3;
            padding: 5px;
        }

        body {
            background: #b3b3b3;
            padding: 5px;
            margin: 0;
        }

        .flex-container {
            background: white;
            padding: 10px;
            border: 5px solid black;

            display: flex;
            flex-direction: row;
            flex-wrap: nowrap
        }

        .item-1 {
            background: #ff7300;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
        }

        .item-2 {
            background: #ff9640;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 250px;
            font-size: 1.8rem;

        }

        .item-3 {
            background: #ff9640;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            height: 250px;
        }

        .item-4 {
            background: #f5c096;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 300px;
            height: 300px;
        }

        .item-5 {
            background: #d3c0b1;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 350px;

            /* auto 일시 width 값=350px 으로 정해짐. */
            flex-basis: auto;
        }

        .item-6 {
            background: #d3c0b1;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 350px;

            /* auto 가 아니면 재정의 가능 */
            flex-basis: 250px;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="item-4">w/h=300px</div>
        <div class="item-5">w=350px</div>
        <div class="item-6">w=350px</div>
    </div>
</body>

</html>

row & width 고려

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>flex basis1 - column & heigth 고려 </title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            font-size: 1.5rem;
        }

        html {
            background: #b3b3b3;
            padding: 5px;
        }

        body {
            background: #b3b3b3;
            padding: 5px;
            margin: 0;
        }

        .flex-container {
            background: white;
            padding: 10px;
            border: 5px solid black;

            display: flex;
            flex-direction: column;
            flex-wrap: nowrap
        }

        .item-1 {
            background: #ff7300;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
        }

        .item-2 {
            background: #ff9640;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 250px;
            font-size: 1.8rem;

        }

        .item-3 {
            background: #ff9640;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            height: 250px;
        }

        .item-4 {
            background: #f5c096;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 300px;
            height: 300px;
        }

        .item-5 {
            background: #d3c0b1;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 350px;

            /* 높이설정 */
            height: 300px;
            /* auto 라서 높이 300px 로 적용 */
            flex-basis: auto;

        }

        .item-6 {
            background: #d3c0b1;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 350px;

            /* 높이설정 */
            height: 300px;
            /* auto 가 아니라서 재정의 가능. */
            flex-basis: 200px;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="item-4">w/h=300px</div>
        <div class="item-5">w=350px</div>
        <div class="item-6">w=350px</div>
    </div>
</body>

</html>

column & height 고려

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>flex basis1 - row & width 백분율 </title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            font-size: 1.5rem;
        }

        html {
            background: #b3b3b3;
            padding: 5px;
        }

        body {
            background: #b3b3b3;
            padding: 5px;
            margin: 0;
        }

        .flex-container {
            background: white;
            padding: 10px;
            border: 5px solid black;

            display: flex;
            flex-direction: row;
            flex-wrap: nowrap
        }

        .item-1 {
            background: #ff7300;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
        }

        .item-2 {
            background: #ff9640;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 250px;
            font-size: 1.8rem;

        }

        .item-3 {
            background: #ff9640;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            height: 250px;
        }

        .item-4 {
            background: #f5c096;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 300px;
            height: 300px;
        }

        .item-5 {
            background: #d3c0b1;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 350px;

            /* % 는 전체너비의 비율 */
            /* 전체너비의 50% */
            flex-basis: 50%;
        }

        .item-6 {
            background: #d3c0b1;
            color: white;
            padding: 10px;
            border: 5px solid black;
            margin: 10px;
            width: 350px;

        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div class="item-4">w/h=300px</div>
        <div class="item-5">w=350px</div>
        <div class="item-6">w=350px</div>
    </div>
</body>

</html>

row & width 백분율

 

 

'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글

CSS 5일차 - Grid(2) Gap, 정렬, auto-rows  (0) 2024.05.02
CSS 5일차 - Grid(1) 행 과 열  (0) 2024.05.02
CSS 5일차 - 4일차 정리  (2) 2024.04.26
CSS 4일차 - FlexBox(1)  (0) 2024.04.25
CSS 4일차 - 색상, visibility, opacity, font, google font, text  (0) 2024.04.25

관련글

티스토리툴바