CSS의 flex 단축 속성

flex 속성은 확장 비율, 축소 비율, 그리고 기본 크기 속성의 단축형입니다. 단축되는 속성의 순서는 중요하며, 다음과 같습니다: flex-grow, flex-shrink, flex-basis. 끝에서부터 속성을 생략할 수 있으며, 이 경우 기본값이 적용됩니다.

Задание 1

다음 코드를 flex 단축 속성을 사용하여 다시 작성하세요:

css.child {
  flex-basis: 100px;
  flex-grow: 1;
  flex-shrink: 2;
}

Задание 2

다음 코드를 flex 단축 속성을 사용하여 다시 작성하세요:

css.child {
  flex-shrink: 0.5;
  flex-grow: 2;
}

Задание 3

다음 코드를 flex 단축 속성을 사용하여 다시 작성하세요:

css.child {
  flex-shrink: 0.5;
  flex-grow: 1;
}

Задание 4

다음 코드를 개별 속성으로 다시 작성하세요:

css.child {
  flex: 1 2 200px;
}

Задание 5

다음 코드를 개별 속성으로 다시 작성하세요:

css.child {
  flex: 2 0.7;
}

Задание 6

다음 코드를 개별 속성으로 다시 작성하세요:

css.child {
  flex: 3;
}