display: flex
flex-direction
row(기본값)
, row-reverse
, column
, column-reverse
flex-wrap: nowrap
nowrap(기본값)
, wrap
, wrap-reverse
flex-flow
flex-direction
과 flex-wrap
를 한번에 작성 가능.container {
display: flex;
flex-flow: column wrap;
}
justify-content
flex-start
, flex-end
, center
, space-between
, space-around
align-items
stretch
, flex-start
, flex-end
, center
, baseline
align-content
flex-wrap: wrap
으로 인해 여러 줄이 발생했을 경우, 자식 요소들을 축의 수평 방향(축과 동일한 방향)으로 어떻게 정렬할지 설정stretch
, flex-start
, flex-end
, center
, space-between
, space-around
flex-grow
flex-shrink
flex-basis
flex
flex-grow
, flex-shrink
, flex-basis
를 한 번에 작성 가능.item {
flex: 1 0 auto;
}
align-self
order
와이어프레임 작성 툴 사이트
https://ovenapp.io/
https://www.figma.com/
css 속성 참고 사이트
https://css-tricks.com/snippets/css/a-guide-to-flexbox/