1. flex-basis : 아이템의 기본크기 기본값 auto #container { display: flex; max-width: 800px; margin: auto; border: 3px solid #000; background-color: #fff; } .item { font-size: 40px; flex-basis: auto; } #container { /* 위와 동일 */ } .item { font-size: 40px; flex-basis: 120px; } 2. flex-grow : 아이템의 너비 비율 기본값 0 flex-grow 값이 1이면 1:1 비율로 맞춰지는게 아니라 여백을 기준으로 비율이 맞춰지는 것이다. .item { flex-grow: 1; } 너비를 똑같이 나타내고 싶을 때는, ...

flex-basis가 항상 width에 적용되는 것은 아니다. flex-direction: row인 경우, flex-basis 는 너비를 제어한다. 그러나 flex-direction: column인 경우, flex-basis는 높이를 제어한다. 주요차이점 flex-basis는 flex item만 적용된다. flex container 는 flex-basis 를 무시하지만 width나 height는 사용할 수 있다. flex-basis는 주축에서 작동한다. 예를 들어 flex-direction: column은 플렉스 항목의 크기를 가로로 조정하려면 width 속성이 필요하다. 절대위치에 있는 flex 항목에는 영향을 주지 않는다. #container { display: flex; flex-direction:..