본문 바로가기
Study/HTML, CSS

[CSS] flex (2)

짤랑쓰 2023. 4. 19. 22:35

flex-wrap

:플렉스 아이템들의 너비가 부모 요소인 플렉스 박스보다 클 경우 넘치는 요소를 교차축 방향으로 쌓을지 결정하는 속성.

 

사용예시)

<!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>flex-wrap</title>
    <style>
        .parent {
            width: 500px;
            margin: 20px;
            border: 1px solid;
            display: flex;
            flex-wrap: nowrap;

        }

        .parent div {
            width: 300px;
            background: #ebebeb;
            border: 1px solid #ccc;
            padding: 10px;
        }

        .wrap {
            flex-wrap: wrap;
        }
    </style>
</head>

<body>

    <h2>flex-wrap:nowrap</h2>
    <div class="parent">
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
    </div>
    <h2>flex-wrap:wrap</h2>
    <div class="parent wrap">
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
    </div>

</body>

</html>

 

 

 

 

 

justify-content

: 주축에서 플렉스 아이템을 배치하는 속성

 

사용예시)

<!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>justify-content</title>
    <style>
        .parent {
            width: 500px;
            margin: 20px;
            border: 1px solid;
            display: flex;
            justify-content: space-between;
        }

        .parent div {
            width: 50px;
            height: 50px;
            background: #ebebeb;
            border: 1px solid #ccc;
            padding: 10px;
            text-transform: uppercase;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
    </div>
</body>

</html>

 

 

 

 

 

align-items

:교차축에서 플렉스 아이템을 배치하는 속성

 

특징

  • 기본값은 flex-strech로서 부모요소의 세로 길이가 지정되어 있다면 해당 높이에 맞춰 모든 요소들의 높이가 늘어난다.
  • 높이가 지정되어 있지 않다면 플렉스 아이템 중 세로 높이가 가장 큰 요소에 맞춰 나머지 요소들의 높이가 늘어난다.

 

사용예시)

<!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>align-items</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            margin: 20px;
            border: 1px solid;
            display: flex;
            align-items: center;
        }

        .parent div {
            width: 50px;
            height: 50px;
            background: #ebebeb;
            border: 1px solid #ccc;
            padding: 10px;
            text-transform: uppercase;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
    </div>
</body>

</html>

 

 

 

 

 

align-content

: justify-content의 세로 버전(교차축 버전)

 

사용예시)

<!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>align-content</title>
    <style>
        .parent {
            width: 500px;
            height: 400px;
            margin: 20px;
            border: 1px solid;
            display: flex;
            flex-wrap: wrap; /* 넘치는 요소를 아래로 쌓이도록 한다.*/
            align-content: space-between;

        }

        .parent div {
            width: 100%;
            height: 50px;
            background: #ebebeb;
            border: 1px solid #ccc;
            padding: 10px;
            text-transform: uppercase;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
    </div>
</body>

</html>

 

 

 

 

 

order

:플렉스 아이템에 설정하는 속성으로 아이템이 화면에 나타나는 순서를 변경한다.

 

특징

  • HTML 코드는 수정하지 않고 CSS만으로도 순서를 변경할 수 있어 반응형에서 특히 유용한 속성이다.
  • order 속성의 값은 양수, 음수 모두 적용할 수 있고 같은 값을 지정하면 HTML 작성 순서로 화면에 표시된다.
  • order 속성의 값이 작을수록 먼저 표시된다.(음수로 지정된 요소가 가장 앞에 배치됨)

 

사용예시)

<!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>Order</title>
    <style>
        .parent {
            width: 600px;
            display: flex;
        }

        .parent div {
            width: 200px;
            height: 50px;
            background: #ebebeb;
            border: 1px solid #ccc;
            padding: 10px;
            text-transform: uppercase;
        }

        .parent div:nth-child(1){
            order: 2;
        }
        .parent div:nth-child(2){
            order: 3;
        }
        .parent div:nth-child(3){
            order: 1;
        }
    </style>
</head>

<body>
    <h1>order</h1>
    <div class="parent">
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
    </div>
</body>

</html>

 

 

 

 

 

 

플렉스 박스에 여백이 생겼을 때 플렉스 아이템의 크기를 어떻게 늘려서 빈 여백을 채울 지를 결정하는 속성

 

  • flex-grow : 빈 공간을 모두 채워서 배치. 기본값 1
  • flex-shrink : 넘치는 플렉스 아이템의 크기를 줄여서 배치. 기본값 1
  • flex-basis : 플렉스 아이템의 크기를 지정. 기본값 0

 

사용예시1)

<!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>Flex</title>
    <style>
        .parent {
            width: 400px;
            display: flex;
            border: 1px solid
        }

        .parent div {
            width: 100px;
            height: 50px;
            background: #ebebeb;
            border: 1px solid #ccc;
            padding: 10px;
            box-sizing: border-box;
            text-transform: uppercase;
        }

        .shrink div {
            width: 200px;
        }

        
        .parent .grow{
            flex-grow: 0.5; /* 빈 공간(플렉스박스공간 - 플렉스아이템들을합친공간)의 50%를 차지*/
        }

        .shrink div:last-child{
            flex-shrink: 2; /* 1: 1: 2 비율이 됨. 넘치는 200의 값에서 50%인 100px이 줄어서 100px로 나타남*/
        }

        .parent .basis{
            flex-basis: 180px; /* 플렉스아이템의 너비를 180으로 지정. %를 쓰면 부모 요소의 너비 대비 %를 지정한 것.*/
        }

        .all div:nth-child(1){
            flex: 1 1 0; /* flex: 1로 축약해서 사용 가능*/
        }
        .all div:nth-child(2){
            flex: 1 1 0; /* flex: 1로 축약해서 사용 가능*/
        }
        .all div:nth-child(3){
            flex: 2 1 0;  /* flex: 2로 축약해서 사용 가능*/
        }
    </style>
</head>

<body>
    <h2>flex-grow</h2>
    <div class="parent">
        <div>box1</div>
        <div>box2</div>
        <div class="grow">box3</div>
    </div>
    <h2>flex-shrink</h2>
    <div class="parent shrink">
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
    </div>
    <h2>flex-basis</h2>
    <div class="parent">
        <div>box1</div>
        <div>box2</div>
        <div class="basis">box3</div>
    </div>
    <h2>flex</h2>
    <div class="parent all">
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
    </div>
</body>

</html>

 

 

사용예시2)

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>Flex</title>
    <style>
        .parent {
            width: 400px;
            display: flex;
            border: 1px solid
        }

        .parent div {
            width: 100px;
            height: 50px;
            background: #ebebeb;
            border: 1px solid #ccc;
            padding: 10px;
            box-sizing: border-box;
            text-transform: uppercase;
        }


        .all div{
            flex: 1;
            transition: 0.5s;
        }

        .all div:hover{
            flex: 2;
        }
    </style>
</head>

<body>

    <h2>flex</h2>
    <div class="parent all">
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
    </div>
</body>

</html>

 

저작자표시 (새창열림)

'Study > HTML, CSS' 카테고리의 다른 글

[CSS] responsive 반응형 (+vscode 단축키)  (0) 2023.05.03
[CSS] transition, animation, transform  (0) 2023.04.24
[CSS] float, position 기본 개념 정리  (0) 2023.04.19
[CSS] 선택자  (0) 2023.04.18
[반응형 웹 기초] media query  (0) 2023.04.04

'Study/HTML, CSS' Related Articles

티스토리툴바