float이란?
flex-box의 등장으로 float은 현재 이미지와 텍스트를 배치하는 방법으로 사용되어지고 있다.
종류로는 float:left(이미지가 왼쪽상단에 나머지 텍스트가 채워진다), float:center(이미지가 상단 중간에 나머지는 텍스트가 채워진다), float:right(이미지가 오른쪽 상단에 나머지 텍스트가 채워진다) 이 세가지가 있다.
Flexbox 2가지 개념 이해하기
- container와 item 각각 속성값이 존재한다.
container의 속성값들
- display
display: flex;로 지정해서 포함된 박스들을 조절할 수 있다. - flex-direction
row, row-reverse, column, column-reverse로 만들 수 있다. row나 row-reverse를 지정하면 중심축이 수평축이 되며, 반대축은 자연스럽게 수직축이 된다.
즉, 박스의 방향을 지정한다. - flex-wrap
한줄애 다 넣어있는것으로 flex-wrap: wrap;으로 지정하면 한줄에 다 못넣으면 다음줄로 넘어가게 한다. - flex-flow
- justify-content
중심축에서 아이템의 상태를 지정한다. - align-items
반대축에서 아이템의 상태를 지정한다. - align-content
justify-content와 비슷하지만 반대축의 아이템의 상태를 지정한다.
item의 속성값들
-
order
부모박스가 display:flex로 지정된 상태에서 해당 아이템에 order:1을 넣어서 순서를 지정해줄 수 있다. -
flex-grow
아이템은 화면이 커지거나 작아지면 아이템의 크기는 고정되어서 유지한다. 그래서 flex-grow:1 이런식으로 사용하여 컨테이너를 꽉 채우려고 아이템이 늘어나게 된다.(기본값은0)
만약 3개의 아이템에 각각 flex-grow: 1과 2와 3을 넣는다면 1을 넣은 아이템은 3을 넣은 아이템보자 1/3작은 모습으로 늘어난다. -
flex-shrink
컨테이너가 점점 작아졌을때 어떻게 변화(작아지는)를 줄 수 있는지 설정한다.기본값 0을 설정하면 고유한 크기를 유지하려고 한다.
아이템 3개를 각각 flex-shrink: 1,2,3을 넣으면 1보다 3을 넣은 아이템이 3배 더 작게 작아진다. -
flex-basis
공간을 얼마나 차지할 수 있는지 세부적으로 설정 가능하다.
flex-basis : auto; 는 glow, shrink에 맞추서 적용된다.
flex-basis : 10%, 30%, 60% 각각 아이템에 적용하면 화면에서 볼때 커지거나 작아질때도 설정한 비율로 나오게 된다. -
align-self
아이템별로 즉 아이템 하나만 특별하게 배치가능.
- 중심축과 반대축이 존재한다
수직과 수평선이 있다면 수직선을 중심축으로 지정하면 반대축은 자동으로 수평선이 된다.
반대로 수평선을 중심축으로 지정하면 자동으로 수직선이 반대축이 된다.
