Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Flex Shorthand | Layouts
Introduction to CSS Part II
course content

Зміст курсу

Introduction to CSS Part II

Introduction to CSS Part II

1. Text Styles
2. Сolors and Background
3. Layouts

bookFlex Shorthand

The flex shorthand property is a way to set the values of multiple flexbox properties in a single declaration. It can be used to set the flex-grow, flex-shrink, and flex-basis properties in a single line.

Here is a breakdown of each of the individual properties that can be set with the flex shorthand:

  • flex-grow. This property determines how much a flex item should grow relative to the other items in the container. It takes a numerical value, and the default value is 0. A value of 1 means the item will grow at the same rate as the other items in the container, while a value of 2 means it will grow twice as fast;

  • flex-shrink. This property determines how much a flex item should shrink relative to the other items in the container. It takes a numerical value, and the default value is 1. A value of 0 means the item will not shrink at all, while a value of 2 means it will shrink twice as fast as the other items;

  • flex-basis: This property sets the default size of a flex item along the main axis. It can be specified in any length unit (e.g., px, em, %), and the default value is auto.

Here's an example of using the flex shorthand property to set all three values at once:

is equivalent to:

Here's an example of using the flex shorthand property to set just the flex-grow value:

is equivalent to

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 6
We're sorry to hear that something went wrong. What happened?
some-alt