flex 잠깐 정리

https://www.youtube.com/watch?v=7neASrWEFEM&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC

드림코딩 채널을 보면서 복습하기 위해서 막써보자.

 

flexbox에 도움 줄 링크

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox

Container

container에 display: flex를 줘서 이제 flex box라는 것을 지정하고

flex-direction과 flex-wrap을 같이 사용가능한 것이 flex-flow.

flex-flow: column nowrap 이런식으로 쓸 수 있다.

wrap으로 하면 2줄 사용가능. nowrap이 기본 값.

 

아이템들을 어떻게 정리할래?

justify-content : flex-start 기본값! (row일 때 좌->우 / column일 때 위->아래)

center로 하면 가운데! space-around라고 하면 박스를 둘러싸게 공간을 넣어주는 것이다 4방면 다.

space-between은 서로 사이만!

 

반대 축으로 정렬해보자.

align-items : center하면 수직에서 가운데

baseline으로 하면 텍스트 아랫단을 기준으로 정렬해줘란 뜻. 마찬가지로 container에 주는 속성이라는 점!

 

반대 축이긴 한데! 2줄 이상이다?

align-content : center하면 가운데 몰리고 space-between하면 가운데 공백 빈상태로 정렬된다.

 

 

 

Item

flex-grow: 0 (기본값 0)

예를들어 가로에 3개의 블럭이 있을 때 아이템1번에 flex-grow 값으로 1을 주면 아이템 2, 3 번의 고유 width값은 유지한채 브라우저 가로를 늘리면 아이템1번이 계속 가로를 채운다.

 

다 동일하게 1로 하면 다 똑같은 배율로 늘어나고 어느하나를 2로 하면 다른게 1배율로 커질 때 얘는 2배로 커지게 한다라는 의미다.

 

flex-shrink:0 (기본값 0)

얘는 flex-grow의 정확히 반대라고 생각하면 된다.

줄어들 때 얼마나 큰 폭으로 줄어지 지정해주는 것이다.

 

flex-basis

grow와 shrink제거하고

가로에 아이템3개 있다했을 때 60%, 30%, 10% 이런식으로 배치할 수 있다.

 

align-self

수직으로 아이템 별로 정리할 수 있다.