25.03.25 (화) 31일차 CSS

허배령·2025년 3월 25일

Direction Flex Flexbox basis grow justify shrink wrap

괴발개발 TIL

목록 보기

39/54

Flexbox

  /*
  item(자식태그)을 감싸는 요소(부모태그)의 형식을
  flexbox로 변경
  -> item들이 자동으로 정렬되며, 레이아웃을 쉽게 조정할 수 있음

  자동 정렬 -> 가로/세로 정렬을 쉽게 조정 가능
  공간 배분 -> 요소 간 간격을 자동으로 조정
  반응형 레이아웃 -> 화면 크기에 따라 유연하게 조정
  */

  /* flex-direction (부모 전용 속성) 
  메인축의 방향과 시작위치를 지정하는 속성

  /* 행 방향 (가로, 기본값)*/
  /* flex-direction: row; */

  /* 행 방향 + 순서 반대 (뒤집어짐) */
  /* flex-direction: row-reverse; */

  /* 열 방향 (세로) */
  /* flex-direction: column; */

  /* 열 방향 (세로) +  순서 반대 (뒤집어짐) */
  /*flex-direction: column-reverse; */
/*-----------------------------------------------*/
  /* flex-wrap (부모 전용 속성)
  내부 item 들을 포장하는 속성
  item들이 강제로 한줄에 배치되게 할지,
  한줄을 벗어나 여러줄로 배치할 것인지 지정 */

  /* item을 한줄로 배치 (기본값) */
  /* flex-wrap: nowrap; */

  /* item을 여러줄로 배치 */
  /* flex-wrap: wrap; */

  /* item을 여러줄로 배치 (뒤에서 배치) */
  /*flex-wrap: wrap-reverse; */
/*-----------------------------------------------*/
  /* justify-content (부모 전용 속성)
    메인축 방향으로 item의 item의 정렬 방법을 조정함 */

  /* 메인축 방향으로 앞에서부터 정렬 (기본값) */
  /* justify-content: flex-start; */

  /* 메인축 방향으로 뒤에서부터 정렬 */
  /* justify-content: flex-end; */

  /* 메인축 방향으로 가운데 정렬 */
  /* justify-content: center; */

  /* 양끝쪽을 붙인 상태에서 item 들의 간격을 일정하게 정렬 */
  /* justify-content: space-between; */

  /* 양끝은 조금, item 중간은 일정 간격으로 정렬 */
  /* justify-content: space-around; */

  /* item이 메인축 내에서 동일한 간격을 가짐 */
  /* justify-content: space-evenly; */
/*-----------------------------------------------*/
  /* align-items (부모 전용 속성)
  item들을 교차축 방향으로 정렬하는 방법을 지정하는 속성 */
 
  /* 교차축 앞에서부터 정렬 */
  /* align-items: flex-start; */

  /* 교차축 가운데 정렬 */
  /* align-items: center; */

  /* 교차축 끝에 붙어서 정렬 */
  /* align-items: flex-end; */ 
/*-----------------------------------------------*/

Flexbox를 이용할 때 반드시 알아야 하는 것

1. Flexbox의 구성
- flex-container : 정렬이 필요한 요소를 감싸는 요소 (부모)
- item: 정렬을 적용할 요소 (자식)
(flex-container와 item에 사용되는 flex 관련 css 속성이 나누어져 있음.)

2. Flexbox의 축
- 중심축
- 교차축 or 반대축

```html
  <!-- flexbox -->
  <div class="flex-container"> <!-- 부모 -->
    <div class="item item1">item1</div> <!-- 자식 -->
    <div class="item item2">item2</div>
    <div class="item item3">item3</div>
    <div class="item item4">item4</div>
    <div class="item item5">item5</div>
    <div class="item item6">item6</div>
    <div class="item item7">item7</div>
    <div class="item item8">item8</div>
    <div class="item item9">item9</div>
  </div>

# CSS

div{
  border : 1px solid black;
  box-sizing: border-box;
  /* content + padding + border 합으로 width/height 지정 */
}

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

.item1{background-color: red;}
.item2{background-color: orangered;}
.item3{background-color: orange;}
.item4{background-color: yellow;}
.item5{background-color: yellowgreen;}
.item6{background-color: green;}
.item7{background-color: lightblue;}
.item8{background-color: blue;}
.item9{background-color: violet;}

.flex-container {
  height: 800px;

  display: flex;

Flexbox를 이용한 요소 정가운데 배치하기

<div id="con">
    <div id="item-center"></div>
  </div>

# CSS

  #con {
    width: 450px;
    height: 450px;

    display: flex;

    /* 메인축 가운데 정렬 */
    justify-content: center;

    /* 교차축 가운데 정렬 */
    align-items: center;
  }

  #item-center {
    width: 80px;
    height: 80px;
    background-color: red;
  }

flex-basis

Flexbox 내의 item의 메인축 방향으로의
기본 점유율(크기)을 지정하는 속성

<div class="flex-container">
    <div class="item item1 basis-20">item1</div>
    <div class="item item2 basis-30">item2</div>
    <div class="item item3 basis-50">item3</div>
  </div>

# CSS

  /* item(자식)에게 주는 flex 속성 */
  /*
  flex-basis : item의 기본 크기(초기크기)를 결정하는 속성
  부모를 기준으로 자식이 얼마만큼 점유하겠는가?
  width와 비슷하지만, flex-grow, flex-shrink에 의해
  유동적으로 변경될 수 있음.

  auto; (기본값) - 요소 본래의 크기만큼을 가짐 (75 x 75)
  0 : 본래 요소의 크기 중 content만을 남겨두고 차지하는 영역 없음
  */

 .basis-20 {
    flex-basis: 20%;
  }

  .basis-30 {
    flex-basis: 30%;
  }

  .basis-50 {
    flex-basis: 50%;
  }

flex-grow

Flexbox에 공간이 남을 경우
item이 컨테이너에서 가용 공간을 얼마나 차지할지를 정의하는 속성

  <div class="flex-container">
    <div class="item item1 grow1">item1</div>
    <div class="item item2 grow2">item2</div>
    <div class="item item3 grow3">item3</div>
  </div>

# CSS

  /* flex-grow */
  .grow1 {
    flex-grow: 0;
    /* 0 (기본값)
      요소가 추가적인 가용 공간(남은 공간)을 차지하지 않음
      자신의 초기 크기만 유지

      설정값은 여백의 비율로 작성하고 적용됨
      */
  }

  .grow2 {
    flex-grow: 2;
  }

  .grow3 {
    flex-grow: 1;
  }

flex-shrink

FlexBox에 공간이 부족할 때 item이 컨테이너보다 커질 경우 줄어들 수 있는
정도를 정의하는 속성

  <div class="flex-container">
    <div class="item item1 shrink1">item1</div>
    <div class="item item2 shrink2">item2</div>
    <div class="item item3 shrink3">item3</div>

    <div class="item item3 shrink3">item3</div>
    <div class="item item3 shrink3">item3</div>
    <div class="item item3 shrink3">item3</div>
    <div class="item item3 shrink3">item3</div>
    <div class="item item3 shrink3">item3</div>
    <div class="item item3 shrink3">item3</div>
    <div class="item item3 shrink3">item3</div>
    <div class="item item3 shrink3">item3</div>
    <div class="item item3 shrink3">item3</div>
    <div class="item item3 shrink3">item3</div>
    <div class="item item3 shrink3">item3</div>
    <div class="item item3 shrink3">item3</div>
  </div>

# CSS

  /* flex-shrink
  1(기본값)
  컨테이너의 크기가 줄어들면
  다른 요소들(자식요소)과 함께 비율적으로 축소될 수 있음을 의미
  */

  .shrink1 {
    flex-shrink: 0;
    /* 0 : 줄어들지 않음
    (컨테이너의 공간이 부족해도 본인의 원래 크기를 유지) */
  }

  .shrink2 {
    flex-shrink: 2;
    /* flex-shrink에 N -> N값 비율대로 줄어듦 */
  }

flex

flex-grow, flex-shrink, flex-basis를 한번에 쓸 수 있는 축약형 속성

  <div class="flex-container">
    <div class="item item1 flex-test1">item1</div>
    <div class="item item2 flex-test2">item2</div>
    <div class="item item3 flex-test3">item3</div>
  </div>

# CSS

  /* flex :
  Flexbox 컨테이너 내에서 아이템의 크기와 배율을 설정하는 속성.
  값 1~3 작성
  */

  .flex-test1 {
    flex: 1;
    /* flex-grow: 1; flex-shrink: 1; flex-basis: 0; 
  
    flex-grow: 1;
    남은 가용공간을 1비율로 차지

    flex-shrink: 1;
    컨테이너 크기가 부족할 때 줄어들면 1비율로 축소
  
    flex-basis: 0;
    요소의 content만 차지
    */
  }

  .flex-test2 {
    flex: 1 0 auto;
    /* flex-grow: 1; flex-shrink: 0; flex-basis: auto;
    -> 가용공간 1비율로 차지, 
       축소되지 않음(본인 크기 유지),
       기본 크기가 auto(본인 요소 원래 크기) 
    */
  }

  .flex-test3 {
    flex: 1 50%;
    /*
    flex-grow: 1; flex-shrink: 1; flex-basis: 50%;
    -> 남은 가용공간을 1 비율로 차지,
       컨테이너 크기가 줄어들면 1 비율로 축소,
       기본 크기 50%
    */
  }

order

Flexbox 컨테이너 내에서 각 아이템들의 나열순서(배치순서)를 결정하는 속성

  <div class="flex-container">
    <div class="item item1 order">item1</div>
    <div class="item item2 order">item2</div>
    <div class="item item3 order">item3</div>
  </div>

# CSS

/* order
  기본값 0;
  양수 ~ 음수 설정 가능
  값이 작은 요소가 먼저 배치되고,
  큰 요소가 나중에 배치됨
  */

  .order:nth-child(1) {
    order: 3;
  }

  .order:nth-child(2) {
    order: -2;
  }

  .order:nth-child(3) {
    order: 0;
  }

연습문제 1

  <div class="container-1">
    <div class="header-1"></div>
    <div class="body-1">
      <div class="body-item"></div>
      <div class="body-item"></div>
      <div class="body-item"></div>
    </div>
    <div class="footer-1"></div>
  </div>

# CSS

  /* flexbox 연습문제 */
  /* 1번 문제 */
  .container-1 {
    width: 800px;
    height: 500px;

    display: flex;
    flex-direction: column;
  }

  .header-1, .footer-1 {
    background-color: grey;
    flex-basis: 20%;
  }
 
  .body-1 {
    flex-basis: 60%;

    display: flex;
    /* body-1은
      container-1의 자식요소이면서
      body-item 요소들의 부모요소이기도 함.
    */
  }

  .body-item:nth-child(1) {
    flex-basis: 30%;
    background-color: skyblue;
  }

  .body-item:nth-child(2) {
    flex-basis: 50%;
    background-color: tomato;
  }
  .body-item:nth-child(3) {
    flex-basis: 20%;
    background-color: beige;
  }

연습문제 2

  <div class="container-2">
    <div class="header-2"></div>
    <div class="body-2">
      <div class="body-2-1"></div>
      <div class="body-2-2">
        <div class="body-2-2-1"></div>
        <div class="body-2-2-2"></div>
      </div>
    </div>
  </div>

# CSS

/* 2번 문제 */
  .container-2 {
    width: 800px;
    height: 500px;

    display: flex;
    flex-direction: column;
  }

  .header-2 {
    flex-basis: 20%;
    background-color: red;
  }

  .body-2 {
    flex-basis: 80%;
 
    display: flex;
  }

  .body-2-1 {
    flex-basis: 30%;
    background-color: yellow;
  }

  .body-2-2{
    flex-basis: 70%;
    display: flex;
    flex-direction: column;
  }

  .body-2-2-1 {
    flex-basis: 80%;
    background-color: greenyellow;
   
  }

  .body-2-2-2 {
    flex-basis: 20%;
    background-color: blue;
  }

연습문제 3

<div class="container-3">
    <div class="header-3"></div>
    <div class="body-3">
      <div class="body-3-1"></div>
      <div class="body-3-2">
        <div class="body-3-2-1">
          <div class="body-3-2-1-1"></div>
          <div class="body-3-2-1-2"></div>
        </div>
        <div class="body-3-2-2"></div>
      </div>
    </div>
  </div>

# CSS

/* 3번 문제 */
.container-3 {
  width: 800px;
  height: 500px;

  display: flex;
  flex-direction: column;
}

.header-3 {
  flex-basis: 30%;
  background-color: yellow;
}

.body-3 {
  flex-basis: 70%;
  display: flex;
}

.body-3-1 {
  flex-basis: 30%;
  background-color: skyblue;
  flex-direction: column;
}

.body-3-2 {
  flex-basis: 70%;
  display: flex;
  flex-direction: column;
}

.body-3-2-1 {
  flex-basis: 50%;
  display: flex;
}

.body-3-2-1-1 {
  flex-basis: 70%;
  background-color: turquoise;
}

.body-3-2-1-2 {
  flex-basis: 30%;
  background-color: red;
}

.body-3-2-2 {
  flex-basis: 50%;
  background-color: hotpink;
}

연습문제 4

<div class="container-4">
    <div class="header-4"></div>
    <div class="body-4">
      <div class="body-4-1"></div>
      <div class="body-4-r">
        <div class="body-4-r-1"></div>
        <div class="body-4-r-1"></div>
        <div class="body-4-r-1"></div>
        </div>
      </div>
    <div class="footer-4"></div>
  </div>
  </div>

# CSS

/* 4번 문제 */

.container-4 {
  width: 800px;
  height: 500px;

  display: flex;
  flex-direction: column;
}

.header-4, .footer-4 {
 flex-basis: 20%;
 background-color: green;
}

.body-4 {
  display: flex;
  flex-basis: 60%;
}

.body-4-1 {
  flex-basis: 30%;
  background-color: yellow;
}

.body-4-r {
  flex-basis: 70%;
  display: flex;
  background-color: orange;
  justify-content: space-between;
  align-items: flex-end;
}

.body-4-r > div {
  width: 30%;
  height: 50%;
  background-color: red;
}

연습문제 5

<div class="container-5">
    <div class="header-5">
      <div class="header-5-1"></div>
      <div class="header-5-2"></div>
      <div class="header-5-3"></div>
    </div>
    <div class="body5">
      <div class="body5-1">
        <div class="body5-1-1"></div>
        <div class="body5-1-2"></div>
        <div class="body5-1-3"></div>
      </div>
      <div class="body5-2"></div>
      <div class="body5-3">
        <div class="body5-3-top"></div>
        <div class="body5-3-down">
          <div class="body5-3-down-left">
            <div class="body5-3-down-left-bottom"></div>
          </div>
          <div class="body5-3-down-right"></div>
        </div>
      </div>
      <div class="body5-4">
        <div class="body5-4-1"></div>
        <div class="body5-4-2"></div>
        <div class="body5-4-3"></div>
      </div>
    </div>
  </div>

# CSS

/* 5번 문제 */
.container-5 {
  width: 800px;
  height: 500px;

  display: flex;
  flex-direction: column;
}

.header-5 {
  display: flex;
  flex-basis: 30%;
  background-color: yellow;
}

.header-5-1 {
  flex-basis: 20%;
}
.header-5-2 {
  flex-basis: 40%;
}
.header-5-3 {
  flex-basis: 40%;
}

.body5 {
  display: flex;
  flex-basis: 70%;
}
.body5-1 {
  display: flex;
  flex-basis: 25%;
  flex-direction: column;
}

/* .body5-1 > div {
  flex-basis: calc(100%/3);
  background-color: skyblue;
} */

.body5-1-1 {
  flex-basis: 33%;
  background-color: skyblue;
}
.body5-1-2 {
  flex-basis: 33%;
  background-color: skyblue;
}
.body5-1-3 {
  flex-basis: 34%;
  background-color: skyblue;
}

.body5-2 {
  background-color: pink;
  flex-basis: 15%;
}

.body5-3 {
  display: flex;
  flex-basis: 45%;
  flex-direction: column;
}

.body5-3-top {
  background-color: orange;
  flex-basis: 50%;
}

.body5-3-down {
  display: flex;
  flex-basis: 50%;
}

.body5-3-down-left {
  display: flex;
  background-color: green;
  flex-basis: 50%;
  flex-direction: column;
}

.body5-3-down-left-bottom {
  flex-basis: 50%;
}

.body5-3-down-right {
  flex-basis: 50%;
  background-color: red;
}

.body5-4 {
  display: flex;
  flex-direction: column;
  flex-basis: 15%;
  background-color: pink;
}
.body5-4-1 {
  flex-basis: 20%;
}
.body5-4-2 {
  flex-basis: 60%;
}
.body5-4-3 {
  flex-basis: 20%;
}