Nov, 16 2021 - display: flex

*11월16일

 

 

-flex-grow: 1; // 모든 항목의 flex-grow가 1이면, 각 항목에게 동일하게 공간 배분,   2: 1: 1로 지정 시, 100px, 50px, 50px과 같이 배분됨

-flex-basis: 10px; -> 기본값은 auto이며, auto일 시 내용물의 크기만큼 flex-basis의 값으로 연결됨

-flex: 1 1 10px; // grow shrink basis 순서!!

-flex-wrap:wrap // 한 행, 열 내 모든 개체 정렬 ->스크린 사이즈에 따른 flex-direction 조정으로 박스 정렬 처리

-flex-basis: calc(calc(768px - 100%) * 1000000);

->768px보다 크거나 같으면 0보다 작거나 같은숫자가 되어 flex-basis가 auto가 됨, 즉 컨텐츠 크기만큼

->768px보다 작으면 무한히 큰 숫자가 됨. 즉 박스 하나당 100% 너비 가짐

 

-특정 부위 너비 고정 시

flex-basis: 50px;

flex-grow: 0; // 비율에 포함 안시키기

flex-shrink: 0;