[CSS] Flex Box

CSS의 꽃!!! Flex Box는 두가지만 알고 있으면 큰 그림을 그릴 수 있습니다.

 

1) Flex Box에는 Container 박스에 적용되는 속성 값들이 존재하고, 각각의 Item들에 적용 할 수 있는 속성 값들이 존재합니다.

 

Container

• display : flex, grid 등이 있음
• flex-direction : 기본값은 row, 그 밖에도 row-reverse, column, column-reverse 등이 있음
• flex-wrap : 기본값은 nowrap, 그 밖에도 wrap, wrap-reverse 등이 있음
• flex-flow: flex-direction과 flex-wrap을 합친 속성
  (ex flex-direction: row, flex-wrap: nowrap이면 flex-flow: row wrap으로 쓸 수 있다.)
• justify-content : 중심축에서 item을 어떻게 배치 할 것인 지 정해주는 속성
  기본값을 flex-start, 그 밖에도 flex-end, center, space-between, space-evenly, space-around 등이 있다.
• align-items : 반대축에서 item을 어떻게 배치 할 것인 지 정해주는 속성
  (basline : 텍스트를 기준으로 균등하게 배치 해준다.)
• align-content : 반대축에서 item을 어떻게 배치 할 것인 지 정해주는 속성
  기본값을 flex-start, 그 밖에도 flex-end, center, space-between, space-evenly, space-around 등이 있다.

Item

• order : 순서를 지정 해주는 속성, 기본값은 0(html에서 나온 순서 그대로 배치되어 있음)
• flex-grow : item 요소가, container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 기본값은 0
• flex-shrink : container가 점점 작아 질 때 어떻게 행동 할 지 정해주는 속성, 기본값은 0
• flex-basis : item들이 공간을 얼마나 차지 해야 하는 지 조금 더 세부적으로 지정 해주는 속성, 기본값을 auto
• flex : flex grow와 flex-shrink, flex-basic을 한번에 쓸 수 있는 속성입니다.
• align-self : item별로 item을 정렬 할 수 있는 속성

2) Flex Box에는 중심축(main axis)과 반대축(cross axis)이 있습니다.

예를 들어 수평(가로)가 중심축이라면 수직(세로)는 반대축이 되고, 수직(세로)가 중심축이라면 수평(가로)가 반대축이 됩니다.

 

참고 하면 좋은 사이트

https://css-tricks.com/

CSS-Tricks

 

선물

https://flexboxfroggy.com/#ko

Flexbox Froggy