[CSS] Flexbox

 

[출처] TCP 스쿨

 

float

- 글들을 감싸면서 이미지를 배치할 수 있다.

- 속성 : left, center, right

---

 

Flexbox

- Flex container : container에 적용할 수 있는 값

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

-Flex item: item에 적용할 수 있는 값

• order
• flex-grow
• flex-shrink
• flex
• align-self
•  

---

- Flexbox 에는 main axis(아이템이 정렬되는 방향)와 cross axis(중심축과 반대되는 방) 두개의 축이 있다.

---

 

속성 정리

display: flex; block 성격의 container

display: inline-flex; inline 성격의 container

---

flex-direction: row, row-reverse, column, column-reverse

flex-wrap : nowrap, wrap, wrap-reverse ;

ㄴcontainer 안의 item들의 크기가 container의 크기보다 클 때 줄넘김

flex-flow: column nowrap; 이런식으로 flex-direction과 flex-wrap을 함께 쓸 수 있다.

---

justify-content : flex-start, flex-end, center, space-around(spacing을 넣어줌), space-evenly, space-between, 

ㄴ 중심축에서 아이템을 어떻게 배치할 것인지

align items: center, baseline, 

ㄴ 반대축에서 아이템을 어떻게 배치할 것인지

align-content: space-between, center, 

ㄴ 반대축 아이템 지정

flex-grow: 아이템이 컨테이너를 채우기 위함. (default : 0)

flex-shrink: 컨테이너 사이즈가 바뀔 때 줄어드는 정도 조정

flex-basis: 아이템들이 얼마나 공간을 차지할 수 있는지 세세하게 명시가능

align-self: center

ㄴ아이템별로 아이템 정렬 가능

 

 

***flex box froggy 로 연습해볼것***

https://flexboxfroggy.com/#ko

Flexbox Froggy