CSS flex

flex: 속성

/* flex: <grow> <shrink> <basis>; */
flex: 0 1 auto;

/* 따로 지정 가능 */
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

/* <basis>는 grow가 0 일때만 적용*/
/* <basis>는 최대 크기를 고정해주고 싶을 때 사용*/
/* width와 flex-basis 중, flex-basis를 우선 적용*/
.box {
  border: 1px solid green;
  padding: 10px;
  width 50px;  /* 적용 안됨 */
  flex: 0 1 300px; 
}