[HTML / CSS] FlexBox 정복하기 3

devCecy·2020년 11월 13일
1

HTML / CSS

목록 보기
5/9
post-thumbnail

FlexBox 정복하기 3

마지막으로, flex-grow flex-shrink flex-basis를 통해 브라우저 크기가 커지거나 작아질때 요소의 크기도 변화할 수 있도록 만들어보자.
그리고 진짜 진짜 마지막으로 FLEXBOX FROGGY로 마무리!

(1) 기본틀 만들기

html 파일

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex box 연습</title>
    <link rel="stylesheet" href="index2.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>

css파일

.container {
  background-color: beige;
  height: 100vh;
  display: flex;
}

.item {
  width: 80px;
  height: 80px;
}
.item1 {
  background-color: #ffcdd2;
}

.item2 {
  background-color: #e1bee7;
}

.item3 {
  background-color: #d1c4e9;
}

(2) flex-grow & flex-shrink

flex-growflex-shrink는 브라우저 창의 크기에 따라 요소의 크기를 변화 시켜준다. 이름에서 유추할 수 있듯, flex-grow는 창 크기가 커질때, flex-shrink는 창크기가 작아질때 요소크기를 어떻게 변화 시킬지 정해준다!

flex-frow기준으로 확인해보자.
flex-frow가 적용되지 않는 경우, 아래와 같이 아무리 브라우저 창을 크게 해도 요소의 크기가 달라지지 않는다.

flex-grow값을 아래와 같이 각각1로 준다면?

.item1 {
  background-color: #ffcdd2;
  flex-grow: 1;
}

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

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

브라우저 창이 커짐에 따라 박스1,2,3이 같은 비율로 예쁘게 잘 커진다!

1번,3번박스는 flex-grow: 1; 2번박스는 flex-grow: 2;로 적용해주면?

.item1 {
  background-color: #ffcdd2;
  flex-grow: 1;
}

.item2 {
  background-color: #e1bee7;
  flex-grow: 2;
}

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

2번박스가 1,3번박스보다 2배 큰 비율로 늘어난다~!

flex-grow와 같은 방식으로 flex-shrink도 동작한다.
1,3번박스는 flex-shrink: 1;, 2번박스는 flex-shrink: 2;로 적용해보자.

.item {
  width: 300px;
  height: 300px;
}
.item1 {
  background-color: #ffcdd2;
  flex-shrink: 1;
}

.item2 {
  background-color: #e1bee7;
  flex-shrink: 2;
}

.item3 {
  background-color: #d1c4e9;
  flex-shrink: 1;
}

2번박스가 1,3번 박스보다 2배 더 작아지는것을 확인!

(3) flex-basis

flex-basis는 브라우저 크기 변화에 따라 flex-growflex-shrink보다 더 디테일하게 요소의 비율을 정해 줄 수있다.

1번 박스는 20%, 2번 박스 50%, 3번 박스는 30%의 비율을 유지해줘!라고 적었다.

.item1 {
  background-color: #ffcdd2;
  flex-basis: 20%;
}

.item2 {
  background-color: #e1bee7;
  flex-basis: 50%;
}

.item3 {
  background-color: #d1c4e9;
  flex-basis: 30%;
}

브라우저 크기를 조절해보면 이렇게 20%,50%,30%비율을 유지하며 박스 크기가 달라지는 것을 확인할 수 있다 👍🏻

(4) order

요소들의 순서를 바꿔보자.

.item1 {
  background-color: #ffcdd2;
  order: 2;
}

.item2 {
  background-color: #e1bee7;
  order: 0;
}

.item3 {
  background-color: #d1c4e9;
  order: 1;
}

1번박스는 2, 2번박스는 0, 3번박스는 1로 순서를 바꿔 주었다.

profile
https://velog.io/@dev_cecy 로 벨로그 옮겼습니다👻❣️

0개의 댓글