float

이미지와 텍스트를 어떻게 배치할 것인지 정의하기 위해 나온 것이다.

• float: left
  이미지가 왼쪽에 배치되고 텍스트가 이미지를 감싸면서 배치되는 것.
• float: center
  이미지가 가운데에 배치되고 텍스트가 이미지를 감싸면서 배치되는 것.
• float: right
  이미지가 오른쪽에 배치되고 텍스트가 이미지를 감싸면서 배치되는 것.

flexbox_container & item

container에 적용되는 속성값들이 존재하고, container 안에 있는 각각의 item에 적용할 수 있는 속성값들이 존재한다.

container에 쓸 수 있는 속성값

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

item에 쓸 수 있는 속성값

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

flexbox의 중심축 & 반대축

flexbox에는 중심축과 반대축이 있다. 아이템들이 왼쪽에서 오른쪽으로 정렬되어있을 때는 메인 축이 가로, 반대축이 세로이다. 그리고 아이템들이 위에서 아래로 정렬되어있을 때는 메인축이 세로, 반대축이 가로이다.