Code/CSS

css flex system

하말 ⍺ 2024. 4. 19. 17:53
반응형

https://www.youtube.com/watch?v=7neASrWEFEM

해당 유튜브 영상을 정리한 것 입니다.

 

기본

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
      <div class="item item8">8</div>
      <div class="item item9">9</div>
      <div class="item item10">10</div>
    </div>
  </body>
</html>
.container {
  background: beige;
  height: 100vh;
}

.item1 {
  background: #ef9a9a;
}

.item2 {
  background: #f48fb1;
}

.item3 {
  background: #ce93d8;
}

.item4 {
  background: #b39ddb;
}

.item5 {
  background: #90caf9;
}

.item6 {
  background: #a5d6a7;
}

.item7 {
  background: #e6ee9c;
}

.item8 {
  background: #fff59d;
}

.item9 {
  background: #ffcc80;
}

.item10 {
  background: #ffab91;
}

 

 

부모에서 조절하는 속성

flex-direction

.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction: column; /* default is row */
}

.item {
  width: 40px;
  height: 40px;
}

.item1 {
  background: #ef9a9a;
}

.item2 {
  background: #f48fb1;
}

.item3 {
  background: #ce93d8;
}

.item4 {
  background: #b39ddb;
}

.item5 {
  background: #90caf9;
}

.item6 {
  background: #a5d6a7;
}

.item7 {
  background: #e6ee9c;
}

.item8 {
  background: #fff59d;
}

.item9 {
  background: #ffcc80;
}

.item10 {
  background: #ffab91;
}

 

flex-wrap

.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* default is nowrap 한줄에 다 표시됨, wrap 사용시 꽉차면(현재 코드의 경우 전체 width가 400px보다 작으면) 줄바뀜 */
  /* flex-flow : row wrap */ /* direction과 wrap을 한번에 표현 */
}

.item {
  width: 40px;
  height: 40px;
}

.item1 {
  background: #ef9a9a;
}

.item2 {
  background: #f48fb1;
}

.item3 {
  background: #ce93d8;
}

.item4 {
  background: #b39ddb;
}

.item5 {
  background: #90caf9;
}

.item6 {
  background: #a5d6a7;
}

.item7 {
  background: #e6ee9c;
}

.item8 {
  background: #fff59d;
}

.item9 {
  background: #ffcc80;
}

.item10 {
  background: #ffab91;
}

 

justify-content

.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* flex-flow: row wrap; */

  /* main-axis */
  justify-content: space-evenly; /* start(default) end center space-between 등등... 많음 중심축 기준으로 변한다는 것! */

}

.item {
  width: 50px;
  height: 40px;
  border: 1px solid gray;
}

.item1 {
  background: #ef9a9a;

}

.item2 {
  background: #f48fb1;
}

.item3 {
  background: #ce93d8;
}

.item4 {
  background: #b39ddb;
}

.item5 {
  background: #90caf9;
}

.item6 {
  background: #a5d6a7;
}

.item7 {
  background: #e6ee9c;
}

.item8 {
  background: #fff59d;
}

.item9 {
  background: #ffcc80;
}

.item10 {
  background: #ffab91;
}

 

align-items

.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* flex-flow: row wrap; */

  /* main-axis */
  justify-content: space-evenly;
  align-items: baseline; /* 중심축의 수직방향 정렬. 
  그중 baseline은 텍스트 높이를 맞춰줌 그림에서 .item1에 padding이 들어가서 텍스트가 이동되어있음
  align-content와 혼동 주의 */



}

.item {
  width: 50px;
  height: 40px;
  border: 1px solid gray;
}

.item1 {
  background: #ef9a9a;
  padding: 50px;
}

.item2 {
  background: #f48fb1;
}

.item3 {
  background: #ce93d8;
}

.item4 {
  background: #b39ddb;
}

.item5 {
  background: #90caf9;
}

.item6 {
  background: #a5d6a7;
}

.item7 {
  background: #e6ee9c;
}

.item8 {
  background: #fff59d;
}

.item9 {
  background: #ffcc80;
}

.item10 {
  background: #ffab91;
}

 

align-content

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
      <div class="item item8">8</div>
      <div class="item item9">9</div>
      <div class="item item10">10</div>

      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
      <div class="item item8">8</div>
      <div class="item item9">9</div>
      <div class="item item10">10</div>

      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
      <div class="item item8">8</div>
      <div class="item item9">9</div>
      <div class="item item10">10</div>
    </div>
  </body>
</html>
.container {
  background: beige;
  height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* flex-flow: row wrap; */

  /* main-axis */
  justify-content: space-evenly;
  align-items: baseline;
  /* 중심축의 수직방향 정렬. 
  다양한 옵션 존재. 그중 baseline은 텍스트 높이를 맞춰줌 그림에서 .item1에 padding이 들어가서 텍스트가 이동되어있음
  align-content와 혼동 주의. */

  /*  sub-axis */
  align-content: space-between;
  /* 부축의 정렬. 마찬가지로 다양한 옵션존재
  flex-wrap: wrap에서 작동함. 한줄에선 의미가없음 */

}

.item {
  width: 50px;
  height: 40px;
  border: 1px solid gray;
}

.item1 {
  background: #ef9a9a;
}

.item2 {
  background: #f48fb1;
}

.item3 {
  background: #ce93d8;
}

.item4 {
  background: #b39ddb;
}

.item5 {
  background: #90caf9;
}

.item6 {
  background: #a5d6a7;
}

.item7 {
  background: #e6ee9c;
}

.item8 {
  background: #fff59d;
}

.item9 {
  background: #ffcc80;
}

.item10 {
  background: #ffab91;
}

 

 

자식에서 조절하는 속성

기본

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      
    </div>
  </body>
</html>
.container {
  padding-top: 100px;
  background: beige;
  height: 100vh;
  display: flex;
}

.item {
  width: 50px;
  height: 40px;
  border: 1px solid gray;
}

.item1 {
  background: #ef9a9a;
}

.item2 {
  background: #f48fb1;
}

.item3 {
  background: #ce93d8;
}

 

flex-grow

.container {
  padding-top: 100px;
  background: beige;
  height: 100vh;
  display: flex;
}

.item {
  width: 50px;
  height: 40px;
  border: 1px solid gray;
}

.item1 {
  background: #ef9a9a;
  flex-grow: 2; /*
  공간이 남을때 커지는 비율.
  기본값은 0임 이때는 위에서 정해준 50px, 이후론 비율로 꽉차게 적용됨 
  현재는 2:1:1의 비율. 만약 .item2 .item3에 flex-grow가 없다면 1이 꽉차게 커지고
  나머지는 50px를 유지*/
}

.item2 {
  background: #f48fb1;
  flex-grow: 1;
}

.item3 {
  background: #ce93d8;
  flex-grow: 1;
}

 

flex-shrink

.container {
  padding-top: 100px;
  background: beige;
  height: 100vh;
  display: flex;
}

.item {
  width: 50px;
  height: 40px;
  border: 1px solid gray;
}

.item1 {
  background: #ef9a9a;
  flex-grow: 2;
  /* 기본값은 0임 이때는 위에서 정해준 50px, 이후론 비율로 꽉차게 적용됨 
  현재는 2:1:1의 비율. 만약 .item2 .item3에 flex-grow가 없다면 1이 꽉차게 커지고
  나머지는 50px를 유지*/
  flex-shrink: 2;
  /* grow가 넓어질때라면, shrink는 공간이 기본아이템 크기(여기선50px)보다 좁아질때 축소되는 비율임.
  2:1:1을 유지하지 못하는 순간에 item1은 2배더 많이 줄어듬
  50px이하가 되면 item1이 가장 작은 크기가됨 */
}

.item2 {
  background: #f48fb1;
  flex-grow: 1;
  flex-shrink: 1;
}

.item3 {
  background: #ce93d8;
  flex-grow: 1;
  flex-shrink: 1;
}

flex-basis

.container {
  padding-top: 100px;
  background: beige;
  height: 100vh;
  display: flex;
}

.item {
  width: 50px;
  height: 40px;
  border: 1px solid gray;
}

.item1 {
  background: #ef9a9a;
  flex-basis: 60%; /* 기본 크기 비율 */
}

.item2 {
  background: #f48fb1;
  flex-basis: 30%;
}

.item3 {
  background: #ce93d8;
  flex-basis: 10%;
}

 

flex 

.container {
  padding-top: 100px;
  background: beige;
  height: 100vh;
  display: flex;
}

.item {
  width: 50px;
  height: 40px;
  border: 1px solid gray;
}

.item1 {
  background: #ef9a9a;
  flex: 2 1 auto;
    /* grow, shrink, basis 앞서 3개를 합침 성장시 다른친구들보다 2배로 커지고 1배로 작아지고 */
}

.item2 {
  background: #f48fb1;
  flex: 5 10 auto;
}

.item3 {
  background: #ce93d8;
  flex: 1 5 auto;
}

 

align-self

.container {
  padding-top: 100px;
  background: beige;
  height: 100vh;
  display: flex;
}

.item {
  width: 50px;
  height: 40px;
  border: 1px solid gray;
}

.item1 {
  background: #ef9a9a;
  align-self: center; /* 본인만 조절! */
}

.item2 {
  background: #f48fb1;

}

.item3 {
  background: #ce93d8;

}

 

저작자표시 비영리

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

css grid system 2  (0) 2024.04.19
css grid system 1  (1) 2024.04.19
Bootstrap  (1) 2024.01.02
레이어팝업 css 반응형으로 만들기.  (0) 2023.12.28

'Code/CSS'의 다른글

  • 현재글css flex system

관련글

티스토리툴바