flex 2

기본 시작화면

▶order : 자식 요소의 순서를 지정, 숫자가 작을수록 앞쪽으로 배치된다. 

order 값 부여

▶flex-grow : 요소 안쪽의 여백을 확대. 기본값 = 0, 0을 주면 늘어나지 않는다.
1부터 부모의 너비를 다 차지하려고 늘어난다.

flex-grow 값 부여

작은 크롬 창에서 본 flex-grow

크롬 창을 늘리면 부여해준 값에 따라 일정 비율로 늘어난다.

▶flex-shrink : 요소 안쪽의 여백을 축소. 0을 주면 줄어들지 않음
1 이상의 값을 주면 : 부모의 너비에 따라서 주어진 비율로 줄어든다.

flex-shrink 값을  article의 첫번째 요소에 부여

크롬 전체화면에서 본 flex-shrink

 

크롬 창을 줄이면 부여해준 값에 따라 일정 비율로 줄어든다.

▶flex-basis : 기본 박스의 단위를 지정한다. px, %로 값을 부여하는 것이 가능하고, 혹은 1, 2 같은 비율로도 지정이 가능하다.

flex-basis 값 부여

크롬 전체화면에서 본 flex-basis

크롬 창이 줄어들면 부여해준 값이 유지되진 않는다. 일정비율로 균일하게 줄어든다.

▶flex : 1; = flex: 1 1 0%
→flex-grow:1; flex-shrink:1; flex-basis:0%;
⇒부모를 다 차지하는데 고르게 차지한다.
줄어 들 때 고르게 줄어들어라.
기본 단위는 부모값을 따른다.

⇒자식요소가 부모요소를 (같은 비율로) 전체 다 차지한다.