Flex Items 속성 - flex

Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성이다.

값	의미	기본값
flex-grow	Item의 증가 너비 비율을 설정	0
flex-shrink	Item의 감소 너비 비율을 설정	1
flex-basis	Item의 (공간 배분 전) 기본 너비 설정	auto

flex: 증가너비 감소너비 기본너비;

.item {
  flex: 1 1 20px;  /* 증가너비 감소너비 기본너비 */
  flex: 1 1;  /* 증가너비 감소너비 */
  flex: 1 20px;  /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */
}

 

 

.container{
  border: 4px solid;
  display: flex;
}

.container .item{
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  flex: 1 1 auto;
}

다음과 같이 단축속성 소스코드를 작성 할 수 있으며, 증가 너비 비율 1, 감소 너비 비율 1, 기본 너비설정을 auto로 하겠다는 뜻이된다.