flex-grow와 flex-basis 사용하여 반응형 만들기

1
2
3
4
5
6
7
8
9
10
11
<form>
  <label class="name" for="name-field">
    Name:
    <input id="name-field" />
  </label>
  <label class="email" for="email-field">
    Email:
    <input id="email-field" type="email" />
  </label>
  <button>Submit</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
form {
  padding: 8px;
  border: 1px solid hsl(0deg 0% 50%);

  /* display 속성 */
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

label {
  font-weight: 500;
}
input {
  display: block;
  width: 100%;
  height: 2.5rem;
  margin-top: 4px;
}
button {
  height: 2.5rem;

  /* display 속성 */
  flex-grow: 1;
  flex-basis: 70px;
}

.name {
  /* display 속성 */
  flex-grow: 1;
  flex-basis: 120px;
}
.email {
  /* display 속성 */
  flex-grow: 3;
  flex-basis: 170px;
}
  • flex-grow는 flex 아이템이 컨테이너 안ㄴ에서 다른 아이템들에 비해 얼마나 많은 여유공간을 차지할 것인지 결정하는 값이다.
  • 위에서는 flex-grow가 총 5이니, 1/5,1/5,3/5씩 차지하게 된다.
  • flex-basis는 flex 아이템의 초기 크기를 결정한다.
  • flex-grow가 계산되기 이전에 아이템이 어느정도 크기를 가져야하는지를 정의한다.