✏ flex css / direction, grow, basis, shrink
|
1
2
3
4
5
6
7
8
9
|
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
|
cs |
display: flex를 쓰기 위해서는 반드시 부모요소와 자식요소가 있어야 함.
1️⃣ flex-direction: row / row-reverse / column / column-reverse
|
1
2
3
4
5
6
7
8
9
10
11
|
<style>
.container {
background-color: lavender;
}
.item {
background-color: green;
color: #fff;
border: 1px solid #fff;
}
</style>
|
cs |
✔ 부모인 container 클래스와 자식인 item 클래스에 배경 등 색상만 넣어줬을 때
= 기본값인 수직, 순서대로 정렬
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<style>
.container {
background-color: lavender;
display: flex;
}
.item {
background-color: green;
color: #fff;
border: 1px solid #fff;
}
</style>
|
cs |
✔ 부모인 container 클래스를 display: flex 로 바꿨을 때
= 수평, 순서대로 정렬
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<style>
.container {
background-color: lavender;
display: flex;
flex-direction: row;
}
.item {
background-color: green;
color: #fff;
border: 1px solid #fff;
}
</style>
|
cs |
✔ display를 flex로 바꿔주고 부모인 container 클래스에 flex-direction: row 를 넣었을 때
= 수평, 순서대로 정렬
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<style>
.container {
background-color: lavender;
display: flex;
flex-direction: row-reverse;
}
.item {
background-color: green;
color: #fff;
border: 1px solid #fff;
}
</style>
|
cs |
✔ 부모인 container 클래스에 flex-direction: row-reverse 를 넣었을 때
= 수평, 순서의 반대로 정렬
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<style>
.container {
background-color: lavender;
display: flex;
flex-direction: column;
}
.item {
background-color: green;
color: #fff;
border: 1px solid #fff;
}
</style>
|
cs |
✔ 부모인 container 클래스에 flex-direction: column 을 넣었을 때
= 수직, 순서대로 정렬
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<style>
.container {
background-color: lavender;
display: flex;
flex-direction: column-reverse;
}
.item {
background-color: green;
color: #fff;
border: 1px solid #fff;
}
</style>
|
cs |
✔ 부모인 container 클래스에 flex-direction: column-reverse 를 넣었을 때
= 수직, 순서의 반대로 정렬
(🙋♂️ 👇 display를 flex로 바꾸기 전이랑 차이를 모르겠다면 부모요소에 height값을 넣어보기 !! )
✔ height값을 줬을 때 column, column-reverse 나오는 결과
= column은 수직, 순서대로 정렬되고 column-reverse는 수직, 순서의 반대로 정렬됨
2️⃣ flex-basis / flex-grow / flex-shrink
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<style>
.container {
background-color: lavender;
height: 200px;
display: flex;
}
.item {
background-color: green;
color: #fff;
border: 1px solid #fff;
}
.item:nth-child(2){
flex-basis: 200px;
}
</style>
|
cs |
✔ 자식요소를 선택하고 flex-basis에 픽셀값을 줬을 때
= 선택된 자식요소에 준 픽셀값만큼 기본 크기가 나옴
(basis = 기본)
* 부모가 flex-direction: row인 상태에서 자식요소에 flex-basis를 줬을 때
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<style>
.container {
background-color: lavender;
height: 200px;
display: flex;
flex-direction: row;
}
.item {
background-color: green;
color: #fff;
border: 1px solid #fff;
flex-grow: 1;
}
</style>
|
cs |
✔ 자식요소에 flex-grow: 1값을 줬을 때
= 부모요소의 넓이만큼 자식요소들이 n분의 1값을 각각 갖게 됨
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<style>
.container {
background-color: lavender;
height: 200px;
display: flex;
flex-direction: row;
}
.item {
background-color: green;
color: #fff;
border: 1px solid #fff;
flex-grow: 1;
}
.item:nth-child(2){
flex-grow: 2;
}
</style>
|
cs |
✔ 특정 자식요소에만 다른 값을 주고 싶을 때
= flex-grow값을 다른 자식요소들보다 크게 주면 됨
(* 위의 예시는 5개의 자식 요소들이 1씩 갖고 2번 자식만 2를 가졌기 때문에
1+2+1+1+1=6, 즉 6분의 2를 2번 자식이 가진 것이라고 생각하면 쉽다 !)
https://blogpack.tistory.com/863
CSS 플렉스박스(flex) flex-grow와 flex-shrink 속성의 완벽 이해
플렉스박스의 유연한 레이아웃을 가능하게 하는 가장 중요한 속성 2가지가 "flex-grow" 와 "flex-shrink" 입니다. 두 속성은 "flex-basis" 속성으로 정한 플렉스박스 아이템의 기본 너비를 자동으로 늘어나
blogpack.tistory.com
- shrink는 꼭 flex-basis의 값이 있어야 한다.
- shrink의 값을 0으로 넣으면 축소되지 않고 고정된다.