[ flex ] 부모 요소 / 자식 요소에 사용하는 flex

부모요소

• display : flex 사용 (flex | inline-flex)
• flex-direction : 자식요소 수평 정렬 ( row | column )
• flex-wrap : 자식요소 수직 정렬 ( nowrap | wrap-reverse )
• justify-content : 자식요소 배치 방향 ( flex-start | flex-end | center | space-between | space-arount )
• align-items : 너비를 줄이기, 줄바꿈 ( flex-start | flex-end | center | baseline | stretch )
• align-content : 자식요소 여러 줄 일때 ( flex-start | flext-end | center | space-between | space-arount | stretch )

 

자식요소

• flex : 비율 (정수)
• order : 순서 (정수)
• align-self : 수직 정렬 시 개별적으로 조정( auto | flex-start | flex-end | center | baseline | stretch )