CSS Flex(Flexible box) 사용법
flex는 부모에 display 속성을 flex로 설정하면서 시작합니다.
display:flex
Flex에는 크게 2가지 요소가 있습니다. 하위 요소들을 감싸는 Container 요소, 그 아래 존재하는 Item 요소 입니다. 그리고 각 요소들이 가지는 속성이 구분 되어있습니다.
Container의 속성을 쉽게 설명해드립니다
- flex-flow : flex-direction과 flex-wrap의 조합 속성
- flex-direction : item의 배열 방향, row, row-reverse, column, column-revers(row가 수평, colm이 수직) 표시
- flex-wrap : nowrap(한줄), wrap(여러줄)
- jutify-content : flex-start(왼쪽 정렬), flex-end(오른쪽정렬), center(아이템들은 여백없음), space-between(아이템끼리의 여백만 평등), space-around(모든 여백 평등, 주로 쓰임)
- align-content : vertical-align와 비슷, strectch, flex-start, flex-end, center, space-between, space-around
- align-items : 같은줄에서 각 아이템들의 높이를 조정하거나 높이가 다를 경우 정렬 방법을 정의합니다. strecth, flex-start, flex-end, center, baseline
Item의 속성
- flex-basis : 기본 너비(width)
- flex-grow : 너비의 비율
- flex-shrink : 감소 비율
- order : 아이템 순서, html 순서랑 상관없음, 오름차순 정렬
- 등
댓글(0)