14일. CSS(5) - flex-grow / flex-shrink / flex-basis 축약표현, flex-direction, flex-wrap, ☆정렬 (Alignment)

flex - basis

flex - grow

flex shirink 들을 잘 이해하는게 중요하다~ 

 

이게 기본값! (아무것도 안 적혀 있으면 이게 적혀있는 것과도 같음)

여유공간 줄일 때의 옵션이 shrink 1 

shrink 2는 여유공간이 2배로 작아짐

// 컨텐츠 적힌 부분은 좁혀지지 않고 (이거 실습해보기)

 

flex-grow 1은 여백 나눠가지겠다는거

-> 2명이 나눠가질 때는 비례적으로 1:1 (똑같이)

                                               1:2 (3분할 해서 나눠갖는거) 

---

shorthand for 

 

외우면 편할것이다~~

 

- 순서 중요! (grow가 먼저~!) 

- 만약에 flex-basis만 설정하고 싶을 때는 -> ex) flex : ? 2 100px; 

  ? 자리에 뭐가 들어가야할까. 

-> 0이 맞는 듯

 

---

*방향과 관련해서 쓸 수 있는 녀석들

 

wrap은 여러 층을 쓸 수 있다. 

굳이 오른쪽에 쓰는 이유 : 슬라이드에서 왔다갔다 하면서 보여주는거 생각하면 됨

warp은 높이의 한정이 필요하다!!!

- 여비 없을 때 가능

- container에 해줘야

나 빨강 어디갔지

200니까 100인 박스 2개가 들어가지~ 

 

// 빨간색은 나 ; 이거 빼먹어서임 ㅜ 

 

 

wrap 부분이 정말 헷갈리긴 하는데 아래 정도로 우선 이해.  그냥 display:flex는 grow?, shrink 써가면서 남은 여백들, 여백이 아니더라도 컨텐츠가 아닌 부분들을 줄이며 반응형?을 만들어줬는데 -> wrap은 줄어드는게 아니라, 아래로 보내면서 반응형?을 만든다. (그래서 display:flex 때와는 다르게 스크롤도 생기지 않음)     1) 조건. heigh를 설정해야 함

---

* order

- 기가 막힘

- 순서 바꿔주는거 

- 0 이 기준이니

  맨 앞은 -1

3, 2, 4, ... 이런식으로 오더 주는거면 복잡해짐

다 order 줘야함 (5개 다! - 1,2,3,4,5)

---

정렬 (Alignment)

 

- 메인축에서의 정렬

- 크로스축에서의 정렬

 

지금은, 메인축에서의 정렬 (justigy-contens)

 

---

---

 

 

왼쪽, 오른쪽이라고 굳이 명명 x (수직, 수평 바뀌어도 다 통용되도록)

-> start, end

 

남는 공간 center 정렬

1) flex-center

2) 박스 사이에 껴놓는 space-between

3) 여백을 '더' 늘려서 박스 앞 뒤로 나눠 갖는 것 space-around

   박스가 3개면 여백은 6개?

 

justify-content: mdn

-> 눌러서 구글링해보기 

developer.mozilla.org/en-US/docs/Web/CSS/justify-content

justify-content - CSS: Cascading Style Sheets | MDN

최근 space-evenly가 추가됨.

-> 얘는 양옆 여백이 같음 

space-around와의 차이점은?

-> 얘는 양옆 여백이 같지는 않음

---

wrap이라는 얘가 들어가는 순간 100보다 작아지지 않는다.

-> 100 유지 못하면 아래 칸으로 내려감

 

wrap 

-> 층이 만들어진다는거

-> 각 층마다! 옮겨주고 그래야 함

이건 space between으로

 

이거 다양한 옵션들 놓침

aligh-item: center; 가운데 

 

align-cotent : flex-start;

                   center; ... 

-> 안 바뀜

* 여러 층일 때만 의미가 있음

 

실습 해보기 items, content

Q. 왜 같지? ㅜㅜ

 

이건 각 층에서의! 가운데 

 

이건 컨텐츠가! 가운데 (이 설명 맞는지 확인) 

-> 한 데 모아 패킹해서 전체에서 center해주는 

 

align-content : space-around 하면 이전거(space-around)?랑 완전 다르다. 

- 근데 층에서의? 센터정렬이다? 

 

층을 없애는 것? 

 

'패킹'의 의미는 정렬하고는 상관 x

-> 묶어서 어떻게 하겠다.에서의 '묶어서' 

 

층을 없애서 패킹해서 하나의 층으로 만들어서 하는 거 -> content? 

 

---

* align-self

 

이 12

개별행동 하고 싶을 때 ex) 2만 맨 위에 올라가고 싶다거나 

 

 

---

-> 프로젝트에서 경험해보기! 

 

 

 

 

뭘 따라갈까? 누구 이길까? 

-> flex-basis가 이김 (위에 있는 2번)

    (추정 : 축을 바꿔도 쓰이므로!) 

 

margin을 쓰면 원하는 곳에 몰아줄 수 있다. 

아래처럼 2개 쓰면 나눠 갖는 것

 

이거 실습 

- 맨 위

justify content: between; 넣고

- 3, 5에 margin-left:auto; 넣으면 

 

 

 

// 내일은 flex로 박스 정리 

 

flexboxfroggy.com/#ko

Flexbox Froggy

 

참고

heropy.blog/2018/11/24/css-flexible-box/

CSS Flex(Flexible Box) 완벽 가이드