flex는 flex-grow, flex-shrink, flex-basis의 단축 속성! ⭐️ 참고사이트
이 3가지 속성은 따로 쓰지 않고, 대체로 flex 단축 속성으로 작성한다.
1) 모든 flex item에 flex-grow: 1로 지정
💡 결과 ➔ 남은 200px( flex cotainer 너비 600px - flex items 너비 합 400px = 200px )을 균등하게 50px 나눠가져서 flex item들의 너비가 100px에서 150px이 됨
2) 각 flex item에 flex-grow: 1,flex-grow: 2로 지정
💡 결과 ➔ 남은 200px를 5로 나눈 40px을 flex-grow 값에 곱한 만큼 flex item들의 너비 늘림
1) 모든 flex item에 flex-shrink: 0으로 지정;
💡 결과 ➔ flex cotainer의 넘치는 200px를 줄이지 않고 넘치는대로 보여줌
2) 각 flex item에 flex-shrink: 1,flex-shrink: 0,flex-shrink: 2,flex-shrink: 1로 지정
💡 결과 ➔ flex cotainer의 넘치는 200px를 5로 나눠서 flex-shrink 값에 곱한 만큼 flex item들의 너비 줄임
flex-item의 크기를 지정
(초기값 flex-basis: auto)
width 값과 유사하지만, width 와 flex-basis 값을 동시 적용하면 flex-basis가 우선된다.