[CSS] Flex container에 적용하는 속성들

Flex

Flex contatiner에 적용하는 속성들에 알아보기에 앞서

Flex의 기본적인 성향에 대해 알아보겠습니다.

위의 말대로라면

배치된 방향이 가로 또는 세로인지에 따라 중심축과 교차축이 달라지겠죠?

밑그림은 가로배치, 세로배치에 따라 중심축과 교차축이 달라짐을 보여주는 그림입니다.

나중에 나올 내용 하나 더 암기해 갑시다. (밑에 나와요)

Flex container에 적용하는 속성들

display : flex;

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">22</div>
        <div class="item">333</div>
        <div class="item">4444</div>
        <div class="item">55555</div>
    </div>
</body>
</html>

HTML Code

style.css & result (1)

<div> tag는 block level element의 속성을 가집니다.

style.css & result (1)

container에 flex를 입력하면

flex 아이템들은 가로 방향으로 배치되고,

자신이 가진 내용물의 width 만큼 차지하게 됩니다.

(≒ inline)

flex-direction

배치 방향 설정

row (default value)

row (default value)

row-reverse

column

column-reverse

flex-wrap

줄 넘김 처리 설정

아이템들이 행이나 열에 가득 차면

다음 줄로 넘길지 말지를 정하는 코드

nowrap (default value)

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
    </div>
</body>
</html>

HTML Code

nowrap

(아이템들의 width : 30px 안 되는 데도 모든 요소를 한 줄에 정렬합니다.)

wrap

wrap-reverse

flex-flow

= flex-direction + flex-wrap

direction과 wrap을 한 번에 사용할 수 있습니다.

justify-content

중심축(main axis) 방향 정렬

중심축 방향으로 아이템들을 정렬합니다.

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
</body>
</html>

HTML Code

flex-direction : row인 경우

flex-start (default value)

flex-end

center

space-between

space-around

space-evenly

align-items

교차축(cross axis) 방향 정렬

교차축 방향으로 아이템들을 정렬합니다.

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
</body>
</html>

HTML Code

flex-direction : row

justify-content: space-between 인 경우

stretch (default value)

flex-start

flex-end

center

이해를 돕기 위해 1, 2에 id값을 줘서 box의 크기와 font-size를 변경하였습니다.

baseline

align-content

여러 행 정렬

아이템들의 여러 행을 교차축(cross axis) 방향으로 정렬합니다.

<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
        <div class="item">13</div>
        <div class="item">14</div>
        <div class="item">15</div>
        <div class="item">16</div>
        <div class="item">17</div>
        <div class="item">18</div>
        <div class="item">19</div>
        <div class="item">20</div>
        <div class="item">21</div>
    </div>
</body>
</html>

HTML Code

flex-direction : row

justify-content: space-between

flex-wrap: wrap 인 경우