[CSS] flex-wrap: nowrap; 미작동 이유

2021. 7. 13. 19:11
728x90

 

01 문제

  • nowrap 만 작동하지 않음.
  • 플렉스 컨테이너 크기를 벗어나지 않도록 수축되지 않음.

 

 

nowrap 의 문제

 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>플렉스</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .flex_container{
            width: 400px;
            border: 1px solid black;
            padding: 10px;
            font-family: Consolas;
            text-align: center;
        }
        .box{
            padding: 5px 45px;
            margin: 5px;
            background-color: black;
            color: white;
        }
        .nowrap{
            display: flex;
            flex-wrap: nowrap;
            border: 5px solid red;
        }
        .wrap{
            display: flex;
            flex-wrap: wrap;
            border: 5px solid yellow;
        }
        .wrap-reverse{
            display: flex;
            flex-wrap: wrap-reverse;
            border: 5px solid green;
        }
    </style>
</head>
<body>
    <div class="flex_container">
        <h1>nowrap</h1>
        <div class="nowrap">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
        <h1>wrap</h1>
        <div class="wrap">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
        <h1>wrap-reverse</h1>
        <div class="wrap-reverse">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </div>
</body>
</html>

 

 

 

 

 

02 해결

  • width가 아닌 padding 으로 크기가 결정되었기 때문에 발생한 문제.
  • 실제로 width로 크기를 조절하면 수축이 됨.
  • 플렉스 컨테이너 내부 요소를 배치할 땐 justify-content 나 align-items 를 사용하고, 여백은 차선책으로 생각!

 

 

        .box{
            width: 200px;
            /*padding: 5px 45px;*/
            margin: 5px;
            background-color: black;
            color: white;
        }

※ 플렉스 컨테이너는 플렉스 요소의 보더, 패딩, 마진을 우선적으로 제외하고 크기를 계산한다.

 

 

해결!

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>플렉스</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .flex_container{
            width: 400px;
            border: 1px solid black;
            padding: 10px;
            font-family: Consolas;
            text-align: center;
        }
        .box{
        	width: 200px;
            // padding: 5px 45px;
            margin: 5px;
            background-color: black;
            color: white;
        }
        .nowrap{
            display: flex;
            flex-wrap: nowrap;
            border: 5px solid red;
        }
        .wrap{
            display: flex;
            flex-wrap: wrap;
            border: 5px solid yellow;
        }
        .wrap-reverse{
            display: flex;
            flex-wrap: wrap-reverse;
            border: 5px solid green;
        }
    </style>
</head>
<body>
    <div class="flex_container">
        <h1>nowrap</h1>
        <div class="nowrap">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
        <h1>wrap</h1>
        <div class="wrap">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
        <h1>wrap-reverse</h1>
        <div class="wrap-reverse">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
        </div>
    </div>
</body>
</html>
728x90

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

[CSS] 전체선택자 (*) 사용시 padding, margin 미적용  (0) 2021.08.07
[CSS] container 안 font-size  (0) 2021.07.10

BELATED ARTICLES

more

티스토리툴바