본문 바로가기
IT/css

css flex-warp 속성

by 뉴코딩맨 2023. 3. 24.
css flex-wrap 속성은 주축의 방향에 따라서 교차 축을 기준으로 요소들을 정렬하는 방법입니다. 주축의 방향은 flex-direction 속성으로 변경할 수 있습니다. 

 

flex-model
flex-model

 

주축(MAIN AXIS)이 기본적으로 가로방향이고 교차 축(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>
    <style>
      #container {
        background-color: bisque;
        display: flex;
        height: 600px;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
      #container div {
        width: 100px;
        height: 100px;
      }
      .one {
        background-color: red;
      }
      .two {
        background-color: green;
      }
      .three {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
    </div>
  </body>
</html>

 

주축-가로-방향-교차-축-세로-방향
주축-가로-방향-교차-축-세로-방향

 

요소들을 열 방향으로 정렬시켜 줍니다.

 

주축 세로 방향 교차 축 가로 방향

 

<!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>
    <style>
      #container {
        background-color: bisque;
        display: flex;
        height: 600px;
        flex-direction: column;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
      #container div {
        width: 100px;
        height: 100px;
      }
      .one {
        background-color: red;
      }
      .two {
        background-color: green;
      }
      .three {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
    </div>
  </body>
</html>

 

주축-세로-방향-교차-축-가로-방향
주축-세로-방향-교차-축-가로-방향

 

요소들을 행 방향으로 정렬시켜 줍니다.

 

마무리

 

justify-content 값에 따라서 다양하게 정렬할 수 있고 wrap-reverse를 주면 반대방향으로 정렬이 됩니다.

저작자표시 비영리 변경금지

'IT > css' 카테고리의 다른 글

align-content & align-self 속성  (0) 2023.03.26
css align-items 속성  (0) 2023.03.25
css justify-content 속성  (0) 2023.03.24
css flex-direction 속성  (0) 2023.03.24
css 투명도 조절하는 방법 - rgba, opacity  (0) 2023.03.23

관련글

댓글

티스토리툴바