코딩코딩/웹개발
[CSS] flexbox 속성들
g0n1
2021. 8. 27. 16:09
728x90
flexbox
flexbox는 총 두가지로 되어있다.
가장 작은 유닛인 item과 item들을 담는 container.
각각 적용 가능한 속성은 다음과 같다.
container 속성
display: flex; 플렉스박스 쓰려명 ㅇ당연
flex-direction: row, row-reverse, columns, column-reverse
flex-wrap: wrap: 줄바꿈, wrap-reverse, nowrap:안 바꿈
/* flex-flow에는 direction과 wrap을 한번에 쓸 수 있다 */
flex-flow: [direction, wrap]
아이템 배치
/* 중심축 배치 */
justify-content: [flex-start, flex-end, center, space-around] 어디에 붙일까?
/* 반대축 아이템 배치 */
align-items:
/* 반대축 아이템 */
align-content:item 속성
order: 순서(잘 쓰이진 않는다)
/* 다른 아이템과 값을 비교해서, 컨테이너의 크기에 반응해 움직인다. */
flex-grow: int
flex-shrink: int
flex-basis: %
align-self: 얘만 어떻게 배치할지
참고 영상
728x90