Flexbox

flexbox

부모 요소와 직계 자식 요소간의 관계를 기반으로 레이아웃을 잡을 수 있게 해주는 속성
자식 안에서도 또 flexbox가능

하나의 아이템 박스를 flex items들이 공유한다.
부모 관점에서 바로 밑의 자식들의 레이아웃을 조절하는 것이다.

💡 display: inline 대신 display: flex를 사용하는 이유
가용 공간을 여백화 할 수 있다.
➡️ 가용 공간 중 내가 원하는 곳에 개구리를 둘 수 있다.

❗️ 자식 관점 정렬
flex-item들 끼리의 정렬
(가용 공간 = flex-item 에게 주어지는 공간)을 통해 정렬

• margin(left, right): 0 auto

❗️ 부모 관점 정렬
flex-container를 기준으로 정렬

• justify-content
• align-items

⭐️ 부모 기준으로 정렬하여 자식 요소들을 한번에 적용 시킨 다음 자식 요소로 정렬하여 개별적으로 정렬을 조절

<div class="playground">
   <div class="frog"><img src="images/frog.png"></div>
   <div class="frog"><img src="images/frog.png"></div>
   <div class="frog"><img src="images/frog.png"></div>
</div>

div 요소는 블록 요소이므로 한 요소당 한줄의 공간을 전부 차지한다. 그렇다면 인라인 요소로 변환하지 않으면서 이 개구리들을 한줄에 두고 싶으면 어떻게 해야할까?

❗️부모 요소에 display: flex 를 하면 된다.

부모 - flex-container (display: flex)
자식 - flex-items

자식 관점 (flex items)

1. 

.frog.last {
	background-color: orangered;
    **margin-left: auto**
}

2. 

.frog: nth-child(1) {
    **margin-right: auto**
}
.frog: nth-child(3) {
    **margin-left: auto**
}

3. 

.frog {
    **margin: 0 auto**
}

4. 

.frog: nth-child(1) {
    **margin-left: auto** // 오른쪽으로 밀기
}
.frog: nth-child(3) {
    **margin-right: auto** //왼쪽으로 밀기
}

그렇다면 자식 요소가 부모 요소보다 넘친다면?

➡️ 넘친다 (overflow)
➡️ 가용 공간 없음!!

부모 관점 (flex-container)

• justify-content - main 축 기준
• align-items

justify-content

⭐️ 부모 요소 (flex-container)에 적용 ⭐️

.playground {
	display: flex;
    justify-content: center;
}

❗️ 부모와 자식을 각각 정렬하면 자식을 기준으로 정렬한다.
(자식 이기는 부모 없다 ㅎㅎ)

.playground {
	display: flex;
    justify-content: center;
}
.frog {
	margin: left
}

align-item

⭐️ 부모 요소 (flex-container)에 적용 ⭐️

기본 값은 align-item: stretch로 높이에 맞춰 늘어난다.

❗️부모 기준으로 자식들이 위아래로 stretch

1. 하나의 자식 요소를 height: 500px 로 조정한다.
2. 부모 요소의 높이가 그 자식에 맞추어 늘어난다 (stretch)
3. 부모 요소에 맞추어 모든 자식들의 높이가 늘어난다. (stretch)

.playground {
	display: flex;
    height: 500px;
    justify-content: center;
    align-items: flex-start;
}

➡️ 세로로도 가용 공간 생긴다.

2

.playground {
	display: flex;
    height: 500px;
    justify-content: center;
    align-items: flex-start;
}

.frog.last {
	background-color: orangered;
    margin-top: auto;
}

➡️ 가용 공간 이용하여 자식 요소들 정렬
➡️ 자식이 먼저 정렬되고 그 다음이 부모 정렬
(자식 이기는 부모 없당)

flex-wrap

⭐️ 부모 요소 (flex-container)에 적용 ⭐️

기본값은 flex-wrap: no-wrap으로 넘치면 삐져나간다.
flex-wrap: wrap을 이용하여 넘치는 요소를 감싼다.
➡️ 넘치는 요소가 밑으로 내려감

.playground {
	display: flex;
    height: 500px;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap
}

gap

⭐️ 부모 요소 (flex-container)에 적용 ⭐️

부모 요소에 gap 속성을 이용하면 자식 요소들 사이에 간격을 조정해준다.

❗️요소들마다 margin 줄 필요는 없다.
예전 방식 ) 각 요소들마다 margin-right를 준다.
하지만 이렇게 하면 마지막 요소에는 margin-right:0을 따로 적용해야 하므로 귀찮다.

➡️ 이 문제를 해결하기 위해 gap 속성 사용!!
요소들 사이의 간격만 알아서 조정해줌

.playground {
	gap: 20px;
}

✨ flex-items의 3대장 ✨

• flex-basis
• flex-grow
• flex-shrink
  ➡️ flex-basis를 기준으로 아이템 박스를 늘리고(grow) 줄이고(shrink) ~~

flex-basis

💡 flex-basis
기본값은 flex-basis: auto
각 아이템의 박스크기를 결정 짓는 속성으로 각 아이템의 너비를 내부 컨텐츠의 너비만큼 자동으로 계산

아이템 자신의 width 또는 height 속성의 값을 사용한다.
✔️ flex-basis: auto 일때

.playground {
	display:flex;
}

.frog {
	flex-basis: auto;
    flex-grow: 1;
}

각 flex-item은 frog라는 내부 컨텐츠의 크기만큼 너비가 지정된 것이다.

✔️ flex-basis: 0 일때
flex-grow는 아이템들의 flex-basis를 제외한 여백 부분을 지정된 비율로 나누어 가지는 친구이다.

그런데 현재 flex-basis: 0으로 설정해 아이템의 기본 크기가 0이므로 여백이 100%인 상태이다.
➡️ content의 크기와 관계 없이 flex-grow 설정 비율대로 아이템의 너비를 배분한다.

👀 헷갈리는 점
그렇다면 flex-basis: 0 인데다가 flex-grow가 지정이 안되어있다면 아이템의 기본 크기가 0으로 사라지는 것인가?

❗️ flex-item에는 min-width:auto 라는 기본 값이 설정 되어 있는데, 최소 너비가 내부 컨텐츠 크기라고 지정된 속성이다.

❗️ 이 기본값 때문에 아이템이 내부 컨텐츠보다 더 작아질 수는 없음

➡️ flex-basis: 0라는 속성 때문에 아이템 박스가 작아졌지만 min-width:auto 라는 기본값 때문에 컨텐츠보다 작아지는 것을 막는다.

즉, flex-basis가 아무리 작아도 최소 컨텐츠 크기만큼은 너비가 보장이 된다는 것이다.

flex-grow

💡 flex-grow
기본값은 flex-grow: 0
아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가지는 속성

단위(px 등)가 아니라 flex-basis를 제외한 여백을 가득 채운다는 개념이다!

가용공간을 비율로써 너비화 한것으로 자신의 너비로 가용공간을 가지고 온다고 생각하면 된다.

⭐️ 각 아이템의 크기 = flex-basis +flex-grow ⭐️

❗️ width: auto가 유연성 면에서 좋다고 했듯이 flex-grow도 가용 공간을 모두 채운다는 개념으로 유연성 면에서 중요하다.

++ 유연성) 창의 크기가 바뀜에 따라 알아서 값이 조정된다.

✔️ flex-basis: auto && flex-grow: 1

.playground {
	display:flex;
}

.frog {
	flex-basis: auto;
    flex-grow: 1;
}

가용 공간을 지정된 숫자의 비율로 나누어 가지는 것이다.
이 예시에서는 1로 지정이 되어있으니 가용공간/3을 하여 나누어 가지면 된다!

❗️텍스트 크기에 가용공간을 flex-grow한 공간이 더해지는 것!
(flex-basis가 기본 값일때 텍스트 크기 = 아이템 너비이므로)

✔️ flex-basis: auto && flex-grow: 1 && 컨텐츠의 크기가 다를 때

flex-basis: auto라는 속성은 컨텐츠의 너비에 맞추어 조절되므로 각 아이템 박스는 컨텐츠의 크기에 맞춘다

flex-grow라는 속성은 총 공간에서 flex-basis 만큼을 빼고 나서 나머지 가용공간을 각 비율로 나누어 아이템에 할당해주는 것으로

컨텐츠 크기가 다르다면 각 컨텐츠 크기 + flex-grow로 flex-grow: 1이어도 각각 다른 너비를 가진다.

❗️flex-grow: 1이라고 아이템이 다 같은 너비를 가지는 것이 아님!

❗️ 각 아이템의 총 너비는flex-basis의 크기 + flex-grow가 나누어준 공간이다.
➡️flex-grow: 1이어도 flex-basis의 크기가 다르면 각 아이템이 갖는 너비가 다른 것이다!!

✔️ flex-grow: 2일 때

.playground {
	display:flex;
}

.frog {
	flex-basis: auto;
    flex-grow: 1;
}

.frog.last {
	flex-basis: auto;
    flex-grow: 2;
}

이 예시에서는 하나만 2로 지정되고 나머지는 1로 지정이 되어있으니 가용공간/4를 하여 나누어 가지면 된다!

flex-shrink

기본값은 flex-shrink: 1

✔️ 평화의 시대

.frog {
	flex-basis: 200px;
    flex-shrink: 100;
}

각 아이템 박스를 200px라는 고정 값을 준다.
하지만 만약 아이템이 부모의 너비를 넘으면 어떻게 될까?

flex-shrink: 1라는 기본 값 때문에 flex-basis: 200px라고 고정해놓은 값을 기준으로 같은 각 아이템을 같은 비율로 줄어들게 한다.

➡️ 200px을 처음 기준으로 하고 아이템이 추가 될수록 같은 각 아이템을 같은 비율로 전부 줄여서 부모요소 안에 우겨넣는 것이다.
(강제로 방 크기를 줄여서 세입자들 우겨 넣음)

❗️ 부모 기준에서 아이템의 너비가 똑같이 들어갈 때까지 같은 비율로 작아진 것이다.

.frog {
	flex-basis: 200px;
    flex-shrink: 1;
}
.frog.last {
    flex-shrink: 0;
}

각 shrink를 따로 지정할 수도 있다.

마지막 아이템에만 flex-shrink: 0을 지정하여 줄어들지 않도록 한다.
➡️ 마지막 아이템만 200px의 너비 가진다.

(마지막 세입자에게만 돈을 더 많이 받아 공간을 보장해줌)

.frog {
	flex-basis: 200px;
    flex-shrink: 1;
    **flex-wrap: wrap;**
}

넘치는 부분을 감싸서 그만큼 밑으로 내려줌
(사람이 넘치긴 하지만 방 크기 안줄이고 싶을 때 --> 줄 바꿈으로 지하 층 방을 내어줌)

✨ 부모 요소 (flex-container)에 적용되는 속성

• justify-content
• align-items
• flex-wrap
• gap

✨ 자식 요소 (flex-items)에 적용되는 속성

• flex-basis
• flex-grow
• flex-shrink
• min-width