SLASH 기술 블로그

Display Flex 자주쓰는 레이아웃 모음 본문

CSS

Display Flex 자주쓰는 레이아웃 모음

SLASH 2021. 4. 28. 04:49
반응형

목적

이글은 웹에서 자주쓰이는 레이아웃을 Display Flex가지고 정리 해놓은 글이다.

 

- 가로 정렬

- 세로 정렬

- 자동 줄바꿈 정렬

- 일정 크기로 줄어듬

- 응용 레이아웃1

- 응용 레이아웃2

 

가로 정렬

<html>
  <head>
    <style>
      .parent_box {
        display: flex;
      }
      .child_box {
        width: 48px;
        height: 48px;
        margin: 10px;
        border: 1px solid #222222;
      }
    </style>
  </head>
  <body>
    <div class="parent_box">
      <div class="child_box">1</div>
      <div class="child_box">2</div>
      <div class="child_box">3</div>
    </div>

  </body>
</html>

결과 화면

세로 정렬

<html>
  <head>
    <style>
      .parent_box {
        display: flex;
        flex-direction: column;
      }
      .child_box {
        width: 48px;
        height: 48px;
        margin: 10px;
        border: 1px solid #222222;
      }
    </style>
  </head>
  <body>
    <div class="parent_box">
      <div class="child_box">1</div>
      <div class="child_box">2</div>
      <div class="child_box">3</div>
    </div>

  </body>
</html>

결과 화면

자동 줄바꿈 정렬

<html>
  <head>
    <style>
      .parent_box {
      	width: 40%;
        display: flex;
        flex-wrap: wrap;
      }
      .child_box {
        width: 48px;
        height: 48px;
        margin: 10px;
        border: 1px solid #222222;
      }
    </style>
  </head>
  <body>
    <div class="parent_box">
      <div class="child_box">1</div>
      <div class="child_box">2</div>
      <div class="child_box">3</div>
    </div>

  </body>
</html>

결과 화면

 

일정 크기로 줄어듬

<html>
  <head>
    <style>
      .parent_box {
      	width: 40%;
        display: flex;
        flex-wrap: nowrap;
      }
      .child_box {
        width: 48px;
        height: 48px;
        margin: 10px;
        border: 1px solid #222222;
      }
    </style>
  </head>
  <body>
    <div class="parent_box">
      <div class="child_box">1</div>
      <div class="child_box">2</div>
      <div class="child_box">3</div>
    </div>

  </body>
</html>

결과 화면

응용 레이아웃

응용 레이아웃은 화면 사이즈에 따라 레이아웃이 달라지거나 조금 더 복잡한 레이아웃이다.

 

응용 레이아웃1

<!DOCTYPE html>
<html>
  <head>
    <style>
      .parent_box {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 90%;
        min-width: 480px;
        border:1px solid #222222;
      }
      .child_box {
        flex: auto;
        min-width:110px;
        height: 50px;
        border: 1px solid #222222;
        border-radius: 2px; 
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div class="parent_box">
      <div class="child_box">1</div>
      <div class="child_box">2</div>
      <div class="child_box">3</div>
      <div class="child_box">4</div>
      <div class="child_box">5</div>
      <div class="child_box">6</div>
    </div>
  </body>
</html>

결과 화면

응용 레이아웃2

<!DOCTYPE html>
<html>
  <head>
    <style>
      .parent_box {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 90%;
        min-width: 600px;
        height: 280px;
        border:1px solid #222222;
      }
      .child_box {
        flex: auto;
        min-width: 140px;
        height: 50px;
        border: 1px solid #222222;
        border-radius: 2px; 
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div class="parent_box">
      <div class="child_box">1</div>
      <div class="child_box">2</div>
      <div class="child_box">3</div>
      <div class="child_box">4</div>
      <div class="child_box">5</div>
      <div class="child_box">6</div>
    </div>

  </body>
</html>

결과 화면

@JJoGeon

반응형
Comments