본문 바로가기
Web 기초

flex

by KyeongOUK 2020. 5. 29.

flex-direction
justify-content
align-items(전체)
align-self(개인요소)
order

center
flex-end,start
시작,끝
space-around,between
사이간격
row,column -reverse

flex-wrap
nowrap:모든요소 한줄
wrap:요소 여러줄
wrap-reverse:여러줄 반대

flex-flow: row wrap 
두개 사용가능justify-content:
flex-start / flex-end / center / space-between / space-around

align-items(self):
flex-start / flex-end / center / baseline / stretch

align-content:여러줄일때만가능
flex-start / flex-end / center / space-around / space-between / stretch

flex-direction:
row,column / -reverse

flex-wrap:
nowarp: 모든요소한줄정리
wrap:여러줄걸침
wrap-reverse:요소들을 여러줄 걸쳐 반대정렬
order:양수음수로 숫자만큼이동

flex-flow: row wrap
처럼 두가지사용가능(공백있어야함)

'Web 기초' 카테고리의 다른 글

[html/css] 트랜스폼( Transfrom)  (0) 2020.06.07
[html/css] positon 속성 정리  (0) 2020.06.05
[html/css] css display 속성  (0) 2020.06.03
리액트와 SPA?  (0) 2020.06.02
[php]글쓰기,글수정,리스트,삭제,디테일..  (0) 2020.05.27

댓글