본문 바로가기
IT/css

align-content & align-self 속성

by 뉴코딩맨 2023. 3. 26.
align-content와 align-self 속성은 flex-wrap 속성을 사용했을 때 교차 축의 방향에 따라서 행 간격이나 열 간격을 조절할 수 있습니다. align-content 속성은 모든 요소들의 간격을, align-self 속성은 요소들 각각의 간격을 정렬 시킬 수 있습니다.
 

flex-model
flex-model

 

flex-direction이 row면 주축이 좌측에서 우측 교차축이 상단에서 하단이고 flex-direction이 column이면 주축이 상단에서 하단 교차축이 좌측에서 우측입니다.

 

적용 전

 

<!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;
        align-items: flex-start;
        flex-wrap: wrap;
      }

      #container div {
        width: 300px;
        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>
  </body>
</html>

 

적용-전
적용-전

 

align 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>Document</title>
    <style>
      #container {
        background-color: bisque;
        display: flex;
        height: 600px;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        align-content: center;
      }

      #container div {
        width: 300px;
        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>
  </body>
</html>

 

align-content-적용
align-content-적용

 

 

 

 

align self 적용

 

<!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;
        align-items: flex-start;
        flex-wrap: wrap;
      }

      #container div {
        width: 300px;
        height: 100px;
      }

      div:nth-of-type(3) {
        align-self: flex-end;
      }
      .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>
  </body>
</html>

 

align-self-적용
align-self-적용

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

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

부트스트랩(Bootstrap)이란?  (0) 2023.03.30
flex-basis, flex-grow, flex-shrink 속성  (0) 2023.03.27
css align-items 속성  (0) 2023.03.25
css flex-warp 속성  (0) 2023.03.24
css justify-content 속성  (0) 2023.03.24

관련글

댓글

티스토리툴바