Thuộc tính viết tắt flex trong CSS

Thuộc tính flex là một cách viết tắt cho các thuộc tính về độ phình, độ co và kích thước. Thứ tự của các thuộc tính được viết tắt có ý nghĩa và như sau: flex-grow, flex-shrink, flex-basis. Các thuộc tính có thể được bỏ qua từ cuối, trong trường hợp này chúng sẽ nhận giá trị mặc định.

Задание 1

Viết lại đoạn mã sau bằng thuộc tính viết tắt flex:

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

Задание 2

Viết lại đoạn mã sau bằng thuộc tính viết tắt flex:

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

Задание 3

Viết lại đoạn mã sau bằng thuộc tính viết tắt flex:

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

Задание 4

Viết lại đoạn mã sau bằng các thuộc tính được viết tắt:

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

Задание 5

Viết lại đoạn mã sau bằng các thuộc tính được viết tắt:

css.child {
  flex: 2 0.7;
}

Задание 6

Viết lại đoạn mã sau bằng các thuộc tính được viết tắt:

css.child {
  flex: 3;
}