Flex

flex container에게 속성을 부여하자

보통은 flex container에 속성을 부여해 flex children의 위치를 지정한다 (요소를 움직인다)

• justify-contents : main축에서 움직임
• align-item : cross축에서 움직임

flex children도 스스로 위치 지정 가능

• align-self : 자식 스스로 위치를 지정할 수 있다. align-items와 비슷한 느낌이라 생각하자
• order : 기본값은 0, flex child에게 order를 주게 되면 html은 변하지 않으면서 순서가 바뀌게 된다

한 줄에 배치하기 싫어!

flex는 width와 상관없이 flex children을 한 줄에 배치하려고 한다.
wrap : flex child의 width를 유지하도록 배치하면서 줄바꿈이 발생한다.
이 때 줄 간의 간격을 align-content이라고 한다.

늘리거나 줄이거나

두 속성 모두 flex children에게 부여한다.

flex-grow

기본값은 0이다.
flex container 공간 > flex children Total 공간
만약 1를 주게 되면 남아있는 빈 공간만큼 해당 요소가 가지게 된다. 반응형 디자인에 도움이 된다
만약 flex-grow: 1, flex-grow: 2인 속성이 있을 때, 남은 공간을 각각 1:2의 비율로 가지게 된다.

flex-shrink

기본값은 1이다.
flex-nowrap이면서, flex container 공간 < flex children Total 공간 만약 2를 주게 되면 다른 flex-child보다 2배는 더 줄어든다.

flex size

flex children에 부여한다.

자식요소에게 처음 크기를 준다 (flex-grow나 flex-shrink되기 전)
main-axis에게 작용하기 때문에 row → width, column → height 으로 작동된다.