CSS Flexbox 정리

🔳 Flex box

과거의 레이아웃

• Position / Float / Table

💡 Information 1.

• Container > 박스에 적용되는 속성값 존재
  • display : flex
    flex box로 보여주고
  • flex-direction
    전체적인 방향(중심축이 수평인지 수직인지)
  • flex-wrap
    한줄에 가득차면 다음줄로 넘어갈껀지
  • flex-flow
    ex) flex-flow: column nowrap;
  • justify-content
    중심축에서 컨테이너를 어떻게 배치할지 결정
  • align-items
    반대축에서 아이템을 어떻게 배치할지 결정
  • align-content
    반대축에서 컨테이너를 어떻게 배치할지 결정(justify-content의 반대축 설정)

• Item > 아이템에 적용되는 속성값 존재
  • order > 순서 바꾸기
  • flex-grow > 컨테이너가 점점 커졌을때 어떻게 행동하는지 설정
  • flex-shrink > 컨테이너가 점점 작아졌을때 어떻게 행동하는지 설정
  • flex-basis > 컨테이너의 공간을 더 세부적으로 설정
  • align-self > 컨테이너에 설정된 것에 벗어나서 아이템 하나만 설정

💡 Information 2.

• Flex box > 중심축과 반대축(수평축과 수직축)
  • 내가 중심축을 수평으로 두냐, 수직으로 두냐에 따라서 반대축이 바뀐다.

💡 Conclusion.

1. Flex box는 container와 item에 각각 꾸며줄 수 있는 속성 값이 있다.
2. Flex box는 중심축과 반대축이 있고, 축은 수평 혹은 수직이냐에 따라서 바뀔 수 있다.

Float

텍스트와 이미지들을 배치

float: left
float: center
float: right

참고

https://www.youtube.com/watch?v=7neASrWEFEM
https://css-tricks.com/snippets/css/a-guide-to-flexbox/