보통은 flex container에 속성을 부여해 flex children의 위치를 지정한다 (요소를 움직인다)
justify-contents
: main축에서 움직임align-item
: cross축에서 움직임align-self
: 자식 스스로 위치를 지정할 수 있다. order
: 기본값은 0, flex child에게 order를 주게 되면 html은 변하지 않으면서 순서가 바뀌게 된다flex는 width와 상관없이 flex children을 한 줄에 배치하려고 한다.
wrap
: flex child의 width를 유지하도록 배치하면서 줄바꿈이 발생한다.
이 때 줄 간의 간격을 align-content
이라고 한다.
두 속성 모두 flex children에게 부여한다.
기본값은 0이다.
flex container 공간
> flex children Total 공간
만약 1를 주게 되면 남아있는 빈 공간만큼 해당 요소가 가지게 된다. 반응형 디자인에 도움이 된다
만약 flex-grow: 1
, flex-grow: 2
인 속성이 있을 때, 남은 공간을 각각 1:2의 비율로 가지게 된다.
기본값은 1이다.
flex-nowrap이면서, 만약 2를 주게 되면 다른 flex-child보다 2배는 더 줄어든다.flex container 공간
< flex children Total 공간
flex children에 부여한다.
자식요소에게 처음 크기를 준다 (flex-grow나 flex-shrink되기 전)
main-axis에게 작용하기 때문에 row → width, column → height 으로 작동된다.