프론트엔드 스터디

----------------자식에 적용하는 속성 1.flex-basis (유연한 박스 영역 설정) 아이템의 기본 크기를 설정합니다 (row일 때는 너비, column일 때는 높이) flex-basis: auto; (기본값) flex-basis: 0; flex-basis: 50% flex-basis: 300px; flex-basis: 10rem; flex-basis: content; ex) flex-basis : 100px; 100px이 안되는 A와 C는 100px이 되었고, 100px이 초과한 B는 기존값을 유지 ex)width: 100px; 모두 100px로 맞춰짐 ex)flex-basis:100px; width: 100px; 모두 100px로 맞춰짐 2.flex-grow (유연하게 늘리기) ..

---------컨테이너(부모)에 적용하는 속성-------- 1.display display:flex; (기본값) 자식들에게 inline-block처럼 컨텐츠만큼의 width만을 가지게 한다. display:inline-flex; 컨테이너도 컨텐츠만큼의 width를 가지게 된다. 2.flex-direction (배치 방향 설정) flex-direction: row; (기본값) 행(가로) 방향으로 배치 flex-direction: row-reverse; 행(가로)방향 역순으로 배치 flex-direction: column; 열(세로)방향으로 배치 flex-direction: column-reverse; 열(세로)방향 역순으로 배치 3.flex-wrap (줄넘김 처리 설정) flex-wra..