📦 CSS/CSS

[CSS] Flex Sizing Properties | flex-basis | flex-grow | flex-shrink | flex

하나둘세현 2022. 12. 1. 02:08
728x90

flex sizing properties

공간이 있을때/없을때 어떻게 늘어나고 줄어드는 지 알 수 있다.

body {
    font-family: 'Merriweather', serif;
    
}

h1 {
    text-align: center;
}

#container  {
    background-color: #6c757d;
    width: 90%;
    /* height: 500px; */
    margin: 0 auto;
    border: 5px solid #6c757d;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

#container div {
    width: 200px;
    height: 200px;
    text-align: center;
}

flex-basis

요소가 배치되기 전에 요소의 최초 크기를 결정한다. 즉, 플렉스 컨테이너에 추가되기 전 시작점과 같은거다.

#container div {
    width: 200px;
    height: 200px;
    text-align: center;
    flex-basis: 400px;
}

 

flex-basis가 400px인 이상 너비는 완전히 무시된다. 요소가 한줄로 늘어서 있을 때 flex-basis가 너비의 기준이 된다. 그냥 너비를 지정하면 되는데 왜 굳이 flex-basis를 쓰나에 대해 궁금할 수 있다. flex-basis를 사용하는 이유는 가로인 주축에 걸쳐있기 때문이다. 그렇다면 세로로 바꾸게 되면어떻게 될까?

#container  {
    background-color: #6c757d;
    width: 90%;
    /* height: 500px; */
    margin: 0 auto;
    border: 5px solid #6c757d;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
}

#container div {
    width: 200px;
    height: 200px;
    text-align: center;
    /* flex-basis: 400px; */
}

새로고침하면 여전히 높이는 200px이지만 flex-basis:400px를 하면 ????? 

옆의 사진 처럼 나온다.

flex-basis는 요소가 배치될 때의 최초 크기이다. 주축의 방향에 따라 너비도 되고 높이도 된다.


flex-grow

요소가 그 공간을 얼마나 차지할지를 정한다.

#container  {
    background-color: #6c757d;
    width: 90%;
    /* height: 500px; */
    margin: 0 auto;
    border: 5px solid #6c757d;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

#container div {
    width: 200px;
    height: 200px;
    text-align: center;
    flex-basis: 200px;
}

위의 사진과 같은 경우에는 요소가 남은 공간을 차지하지 않는다. 이럴때 flex-grow 특성을 어떤 요소에서든지 사용할 수 있다.

div:nth-of-type(1) {
    flex-grow: 1;
}

flex-grow:1;을 입력하니 핑크색이 나머지 공간을 전체다 채웠다.

div:nth-of-type(1) {
    flex-grow: 1;
}

div:nth-of-type(5) {
    flex-grow: 1;
}

보라색과 핑크색이 동등하기 자리를 나눠가졌다.

#container div {
    width: 200px;
    height: 200px;
    text-align: center;
    flex-basis: 200px;
    flex-grow: 1;
}

/* div:nth-of-type(1) {
    flex-grow: 1;
}

div:nth-of-type(5) {
    flex-grow: 1;
} */

flex-grow:1;을 입력했더니 더 이상 200px 너비가 아니다. 공간을 균등하게 차지했다. 창을 줄이더라도 비율은 동등하게 유지된다. 

 

flex-grow는 다른 요소에 여러 숫자를 부여할 수 있다.

div:nth-of-type(1) {
    flex-grow: 1;
}

div:nth-of-type(5) {
    flex-grow: 2;
}

양 끝에 두개다 늘었났지만 보라색은 핑크보다 2배 더 비율을 차지했다. 즉 공간이 분배되는 방법이다. 남은 공간이 있을 때만 커진다. 

flex-shrink

컨테이너에 충분한 공간이 없을 때 요소들이 줄어드는 비율을 통제해준다. 

#container div {
    width: 200px;
    height: 200px;
    text-align: center;
    flex-basis: 600px;
    /* flex-grow: 1; */
}

div:nth-of-type(1) {
    flex-grow: 1;
    flex-shrink: 2;
}

div:nth-of-type(5) {
    flex-grow: 2;
    flex-shrink: 0;
}

창을 작게 했더니 첫번재 네모를 포함해 나머지 네모들은 줄어들었다. 첫번재 핑크색은 확 줄어들었다. 나머지는 디폴트가 1이라서 모두 동일한 비율로 줄어드는 것이다. 

 

 

 

Flex

three values: flex-grow | flex-shrink | flex-basis

two  values:  flex-grow | flex-shrink 

두가지 값이 있지만 그 중 하나가 너비거나 px거나 em이면 flex-grow | flex-basis

one value: 숫자가 아닌 값 1개나 단위가 없는 숫자라면 기본적으로 flex-grow를 사용한다. 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox</title>
    <link rel="stylesheet" href="flexbox.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap" rel="stylesheet">
</head>
<body>
    <h1>Let's Play With Flexbox</h1>

    <section id="container">
        <div style="background-color: #ff99c8;"></div>
        <div style="background-color: #fcf6bd;"></div>
        <div style="background-color: #d0f4de;"></div>
        <div style="background-color: #a9def9;"></div>
        <div style="background-color: #e4c1f9;"></div>
    </section>

    <h2>Another Example</h2>
    <main> 
        <section class="sidebar"></section>
        <section class="maincontent"></section>
        <section class="sidebar"></section>
    </main>
</body>
</html>

 

body {
    font-family: 'Merriweather', serif;
    
}

h1, h2 {
    text-align: center;
}

#container  {
    background-color: #6c757d;
    width: 90%;
    /* height: 500px; */
    margin: 0 auto;
    border: 5px solid #6c757d;
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* flex-wrap: wrap; */
}

#container div {
    width: 200px;
    height: 200px;
    text-align: center;
    flex-basis: 600px;
    /* flex-grow: 1; */
}

div:nth-of-type(1) {
    flex-grow: 1;
    flex-shrink: 2;
}

div:nth-of-type(5) {
    flex-grow: 2;
    flex-shrink: 0;
}

h1, h2 {
    color: #6c757d;
}

main {
    width: 80%;
    margin: 0 auto;
    border:  5px solid #6c757d;
    height: 500px;
    display: flex;
}

main .sidebar{
    background-color: #e4c1f9;
    flex: 1;
}

main .maincontent{
    background-color: #ff99c8;
}

위아래 보라색 sidebar 2개는 티가 안나지만 2px 짜리 하얀 실선을 만들면 두개의 요소인것을 알 수 있다. 너비가 없는 main-content는 flex를 1로 설정하면 똑같은 flex-grow로 취급된다. flex-basis를 설정 안해서 전부 동일한 크기가 되었다. 

 

main .sidebar{
    background-color: #e4c1f9;
    flex: 1;
    border: 2px solid white;
}

 

border 값을 입력했더니 2개의 요소인것을 알 수 있다. 

main .maincontent{
    background-color: #ff99c8;
    flex: 1;
}

 

 

flex-basis를 설정 안해서 전부 동일한 크기가 되었다. 

728x90

'📦 CSS > CSS' 카테고리의 다른 글

[CSS] 레이아웃  (0) 2023.01.24
Responsive design, Media queries  (0) 2022.12.01
[CSS] align-content | align-self  (0) 2022.11.30
[CSS] Flexbox 속성 | align-items  (0) 2022.11.28
[CSS] Flexbox 속성 ③ | flex-wrap: wrap; | flex-wrap: wrap-reserve; | flex-wrap: nowrap;  (1) 2022.11.28

'📦 CSS/CSS'의 다른글

  • 현재글[CSS] Flex Sizing Properties | flex-basis | flex-grow | flex-shrink | flex

관련글

티스토리툴바