[CSS] flexbox 속성들

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: 얘만 어떻게 배치할지

 

참고 영상

https://youtu.be/7neASrWEFEM