flexbox

728x90

box와 item들을 행,열로 자유자재로 배치하기 좋음

 

float

- 이미지와 text를 어떻게 배치할껀지 정의

float: left,center,right로 배치가능

100% : height이 사람짐. 아이템에 맞게 퍼센테이지가 정해짐

부모에 상관있음(html,body도 100%로 지정이 되어야 함)

100vh : 부모에 상관없이 100%사용

flexbox

중심축과 수평축(반대축)이 있음

중심축을 수직/수평을 어떻게 두나에 따라 수평축이 바뀜

1. container

 - display 

:flex  아이템이 왼_오른쪽으로 정렬됨

- flex-direction

기본값: row (왼-오)

row-reverse (오-왼)

column(위-아래)

column(아래-위)

- flex-wrap

기본값: nowrap

아이템이 많아져도 한줄에 빼곡하게 아이템들을 다 넣음

wrap: 한줄에 아이템이 꽉 차면 다음줄로 내려감

wrap-reverse: 아래에서 위로 거꾸로 정렬

-flex-flow

direction wrap을 한꺼번에 작성

-justify-content

중심축에서 아이템 배치 결정

flex-start: 시작(왼쪽부터)

flex-end : 오른쪽으로 배치

space-around: box를 둘러싸 간격을 넣어줌

양 끝은 공간이 작음

space-evenly: 똑같은 간격을 넣어줌

space-between: 화면에 맞게 아이템을 배치한 다음 중간 사이에만 간격을 넣음

-align-items 수직축에서 아이템 배치

center;

baseline: text 크키에 맞춰 아이템배치

-align-content 

 

2. item

- order 

- flex-grow

-flex-shrink

- flex

- align-self