flex
: 원하는 위치에 배치, 너비, 높이, 위치 변형
{ display : flex; }
flex와 float의 차이는 flex는 브라우저의 크기를 조절하게되면 안에 요소들의 사이즈도 자동으로 조절됩니다.
flex-direction 속성
: 방향 설정
row
row-reverse
column
column-reverse
ex)
flex-wrap 속성
: 줄바꿈
nowrap
wrap
wrap-reverse
justify-content 속성
: 수평 정렬(가로 정렬)
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items 속성
: 수직 정렬(세로 정렬)
stretch(기본값)
start
end
center
align-content 속성
: 2행 이상 자식태그의 수직 정렬
space-between
space-around
space-evenly