flex 단축 속성 - 실무에서 사용할 코드

# 사용할 확률이 높은 코드

.item { flex: 1 } /* 제일 많이 사용하게 될 코드 */
/* == */
.item { flex: 1 1 }
/* == */
.item { flex: 1 1 0}
/* flex-grow 또는 flex-shrink 값을 선언하면 flex-basis 값은 'auto'에서 '0'으로 변경된다. */

# 사용 빈도 낮음

## flex : 0%

- flex : 0% // flex-basis 값만 선언한 경우.

- 거의 사용하지 않음.

.item { flex: 0% }
/* == */
.item { flex: 1 0% }
/* == */
.item { flex: 1 1 0% }
/* flex-grow 초기 값이 0에서 1로 변경된다. */

## flex : initial

- 거의 사용하지 않음.

.item { flex: initial }
/* == */
.item { flex: 0 1 auto }
/* 플렉스 아이템에 아무것도 선언하지 않았을 때의 초기 값. 굳이 이렇게 선언할 필요는 없다. */

## flex: none

- 거의 사용하지 않음.

.item { flex: none }
/* == */
.item { flex: 0 0 auto }
/* 플렉스 박스 모델을 사용하지 않기 위해 값을 덮어 쓸 필요가 있을 때 이렇게 쓸 수 있다. flex-shrink 값이 변경된다. */

## flex: auto

- 거의 사용하지 않음.

.item { flex: auto }
/* == */
.item { flex: 1 auto }
/* == */
.item { flex: 1 1 auto }
/* flex-grow 초기 값이 0 에서 1 으로 변경된다. */