CSS - flex

hj·2022년 4월 26일
1

CSS

목록 보기
2/2
post-thumbnail

flex

수직, 수평 정렬을 위해 사용되는 속성이다.

  • block element는 수직 정렬(layout을 다루기 위한 element)
  • inline element는 수평 정렬 -> text를 다루기 위한 element -> 가로 값과 세로 값을 가질 수 없기 때문에 layout 구조를 가질 수 없으.
    - display: inline-block 설정하면 block element처럼 width, height, margin, padding을 가질 수 있지만 아래 처럼 요소 간에 띄어쓰기가 적용된다..
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
.container {
  border: 2px solid blue;
}

.item {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  display: inline-block;
}

flex는 container와 item이라는 개념이 있다. container는 item들을 감싸고 있는 부모 요소가 된다. item을 정렬하기 위해서는 container가 필요하다.

  • container에 사용하는 속성: display, flex-flow(flex-direction, flex-wrap), justify-content, align-content, align-items
  • flex item에 사용하는 속성: flex(flex-grow, flex-shrink, flex-basis), align-self

flex container

display

flex container를 정의한다.

  • flex: block 특성을 가진 container -> 컨테이너가 수직 정렬
  • inline-flex: inline 특성을 가진 container -> 컨테이너가 수평 정렬

flex-flow

flex-direction, flex-wrap의 단축 속성

flex-flow: 주축 줄바꿈
  • flex-direction: flex item의 주축, 시작 방향 설정
  • flex-wrap: flex item의 줄 바꿈을 설정

flex-direction

  • row(defualt value)
  • row-reverse: row의 반대축으로 표시
  • column
  • column-reverse: column의 반대축으로 표시

flex-wrap

  • nowrap(defualt value): 줄바꿈 안함. item들이 한줄에 표시된다.
  • wrap: item들이 줄 바꿈 된다.
  • wrap-reverse: wrap의 반대 방향으로 줄 바꿈 된다.

flex container 안에 있는 item들은 container의 너비에 따라 크기가 바뀔 수 있다. (item들은 flex-basis: auto를 기본 값으로 가지고 있는데 이렇게 되면 가로. 세로 값이 바뀔 수 있는 형태이다.)

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
</div>
.container {
  border: 2px solid blue;
  display: flex;
}
.item {
  width: 200px;
  height: 100px;
  border: 2px solid black;
}



둘 다 width: 200px로 정의했는데 display: flex를 하면 row 방향으로 한 줄 표시되면서 item의 width가 줄어든다.

justify-content

주축의 정렬 방법 설정

  • flex-start(defualt value): 시작점을 기준으로 정렬

    flex-direction: row-reverse(주축: row, 시작점은 끝에서 부터), justify-content: flex-start
  • flex-end: 주축의 끝나는 점을 기준으로 정렬
  • center: 주축을 기준으로 가운데 정렬
  • space-between: 첫번째와 마지막 item을 container의 시작점, 끝점에 맞추고 남은 공간을 통해 item들을 정렬
  • space-around: item들 사이의 여백을 균등하게 분배하여 정렬

align-content

교차 축의 정렬 방법 설정

flex-wrap으로 줄 바꿈 설정이 되어있고, 교차 축 방향으로 여백이 있는 경우에만 사용 가능 (item이 한 줄인 경우에는 align-items 사용)

  • stretch(defualt value): container의 교차 축을 채우기 위해 item을 늘린다. (item의 높이가 지정되어 있지 않은 경우)

.container {
  height: 300px;
  border: 2px solid blue;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

.item {
  width: 100px;
  height: auto; /* or 100px */
  border: 2px solid black;
}
  • flex-start: 교차 축의 시작점을 기준으로 정렬
  • flex-end: 교차 축의 끝점을 기준으로 정렬
  • center: 교차 축을 기준으로 가운데 정렬
  • space-between
  • space-around

align-items

교차 축의 정렬 방법 설정

item들이 한 줄일 경우 사용된다.

item들이 flex-wrap을 통해 줄바꿈 설정되어 있는 경우에는 align-content 속성이 우선된다. (align-items를 사용하려면 align-content: stretch로 설정)

  • stretch(defualt value): container의 교차 축을 채우기 위해 item을 늘린다. (item에 높이 지정이 안되어 있는 경우)
  • flex-start: 교차 축의 시작점을 기준으로 정렬
  • flex-end: 교차 축의 끝점을 기준으로 정렬
  • center: 교차 축을 기준으로 가운데 정렬
  • baseline: item 안에 있는 문자열을 기준으로 정렬
.container {
  height: 300px;
  border: 2px solid blue;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.item {
  width: 100px;
  height: 100px;
  border: 2px solid black;
}

.container .item:nth-child(3) {
  font-size: 50px;
}

flex items

order

  • item의 순서를 설정
  • item에 숫자를 지정, 숫자가 클수록 순서가 밀린다.(음수 허용)
  • HTML 구조와 상관없이 순서 변경 가능
  • default value: 0

<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>
.container {
  border: 2px solid blue;
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item1 {
  order: 1;
}

.item4 {
  order: -1;
}

flex-grow

  • item의 증가 너비 비율을 설정
  • 숫자가 크면 더 많은 너비를 가진다.
  • item의 너비가 변하지 않거나 0인 경우 적용되지 않음.
  • default value: 0
<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>
.container {
  border: 2px solid blue;
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item1 {
  flex-grow: 1;
  /* item1이 가지고 있는 100px width는 무시되고, container에서 차지할 수 있는 최대 너비를 차지함. (item 2 3은 100px씩 차지한 후) */
}

-> flex-basis, width 속성에 영향을 받을 수 있다.

.item1 {
  flex-grow: 1;
}

.item2 {
  flex-grow: 2;
}

1번과 2번 아이템의 비율이 정확이 2배 차이 ㄴㄴ

flex-shrink

  • item의 감소 너비 비율을 설정
  • 숫자가 크면 더 많은 너비가 감소.
  • item의 너비가 변하지 않거나 0인 경우 적용되지 않음.
  • default value: 1

width: 고정 너비, flex-basis: 기본 너비

1개의 댓글

comment-user-thumbnail
2022년 6월 2일

고수시네요

답글 달기