CSS - flex

2024-12-24 2 분 소요

◆display : flex

flex는 브라우저 크기나 요소의 크기가 불명확할때 효율적으로 요소를 배치, 정렬, 분산 시킬수 있다.
복수의 자식인 flex item과 그 상위 부모 요소인 flex container로 구성된다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="study.css">
    </head>
    <body>
      <div class="container">
        <div class="item">helloflex</div>
        <div class="item">abc</div>
        <div class="item">helloflex</div>
      </div>
      </body>
</html>

.container {
	display: flex;
}

.item{
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 5px;
  text-align: center;
  line-height: 100px;

}

flex

◆flex item

flex item에는 flex-grow, flex-shrink 등이 있다.

1) flex-grow

flex-grow를 item에 주면 화면 전체를 채우려는 특성을 갖게 되고 각 요소들끼리의 원하는 비율 만큼 부여할 수 있다.

.container {
	display: flex;
  
}

.item1{
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 5px;
  text-align: center;
  line-height: 100px;

  flex-grow: 1;
}

.item2{
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 5px;
  text-align: center;
  line-height: 100px;

  flex-grow: 2;

}

.item3{
  width: 100px;
  height: 100px;
  background-color: yellow;
  margin: 5px;
  text-align: center;
  line-height: 100px;

  flex-grow: 4;
}

flex-grow

2) flex-shrink

flex-shrink는 화면이 줄어들 때 아이템의 크기가 어느정도로 줄어들지 설정이 가능하다.

.container {
	display: flex;
  
}

.item1{
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 5px;
  text-align: center;
  line-height: 100px;

  flex-grow: 1;
  flex-basis: 1%
}

.item2{
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 5px;
  text-align: center;
  line-height: 100px;

  flex-grow: 2;

}

.item3{
  width: 100px;
  height: 100px;
  background-color: yellow;
  margin: 5px;
  text-align: center;
  line-height: 100px;

  flex-grow: 4;
}

flex-shrink

◆flex container

flex container에는 flex-direction, flex-wrap, justify-content 등이 있다.

1) flex-direction

요소를 수직, 수평, 역수직, 역수평으로 정렬할 수 있다.

종류

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

1_1) flex-direction: row

요소를 수평으로 정렬한다.

.container {
   display: flex;
   flex-direction: row;
}

flex-direction_row

1_2) flex-direction: row-reverse

요소를 역수평으로 정렬한다.

.container {
   display: flex;
   flex-direction: row-reverse;
}

flex-direction_row-reverse

1_3) flex-direction: column

요소를 수직으로 정렬한다.

.container {
   display: flex;
   flex-direction: column;
}

flex-direction_coloum

1_4) flex-direction: column-reverse

요소를 역수직으로 정렬한다.

.container {
   display: flex;
   flex-direction: column-reverse;
}

flex-direction_colurm-reverse

2) flex-wrap

요소를 줄바꿈을 설정 할수 있다.

종류

flex-wrap: nowrap
flex-wrap: wrap
flex-wrap: wrap-reverse

2_1) flex-wrap: nowrap

줄바꿈하지 않고 아이템의 크기를 줄인다.(기본값)

.container {
   display: flex;
   flex-wrap: nowrap;
}

flex-wrap_nowrap

2_2) flex-wrap: wrap

크기를 줄이지 않고 한칸 내린다.

.container {
   display: flex;
   flex-wrap: wrap;
}

flex-wrap_wrap

2_3) flex-wrap: wrap-reverse

한칸 내리는데 거꾸로 위에서부터 채운다.

.container {
   display: flex;
   flex-wrap: wrap-reverse;
}

flex-wrap_wrap-reverse

3) justify-content

주축을 기준으로 요소를 정렬할 수 있다.

종류

justify-content: flex-end
justify-content: center
justify-content: space-around
justify-content: space-evenly
justify-content: space-between

3_1) justify-content: flex-end

요소을 맨 오른쪽에 맞춘다.

justify-content_flex-end

3_2) justify-content: center

요소를 가운데에 맞춘다.

justify-content_center

3_3) justify-content: space-around

요소끼리의 일정한 테두리 만큼 간격을 벌린다.

justify-content_space-around

3_4) justify-content: space-evenly

요소끼리 일정한 간격만큼 벌린다 (처음, 끝에도 적용)

justify-content_space-evenly

3_5) justify-content: space-between

첫,끝 요소는 맨 끝에 붙힌 후에 남은요소끼리 일정한 간격만큼 벌린다.

justify-content_space-between

참고 : inpa.tistory.com

Twitter Facebook LinkedIn

Hwang hye jin