CSS Flexbox Flexibility

❮ Previous Home Next ❯

Flexibility

The defining aspect of flex layout is the ability to make the flex items flex, altering their width/height to fill the available space in the main dimension.

A flex item is fully inflexible if both its flex-grow and flex-shrink values are zero, and flexible otherwise.



flex-grow

The flex-grow property specifies the flex grow factor of a flex item's main size.

Syntax:

flex-grow: number;

number Default value is 0. Apecifies how much the item will grow relative to the rest of the flexible items.



1
2
3
4
5

Example

<div class="container">
<div style="flex-grow: 1;">1</div>
<div style="flex-grow: 2;">2</div>
<div style="flex-grow: 3;">3</div>
<div style="flex-grow: 2;">4</div>
<div style="flex-grow: 1;">5</div>
</div>
Try this code ❯


flex-shrink

The flex-shrink property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.

Syntax:

flex-shrink: number;

number - Default value is 1. Specifies how much the item will shrink relative to the rest of the flexible items. Negative numbers are invalid.



1
2
3
4
5

Example

<div class="container">
 <div>1</div>
 <div>2</div>
 <div style="flex-shrink: 0;">3</div>
 <div>4</div>
 <div>5</div>
</div>
Try this code ❯




flex-basis

The flex-basis property sets the flex basis.

It accepts the same values as the width and height property and content.

For all values other than auto and content (defined above), flex-basis is resolved the same way as width in horizontal writing modes, except that if a value would resolve to auto for width, it instead resolves to content for flex-basis.

For example, percentage values of flex-basis are resolved against the flex item’s containing block (i.e. its flex container); and if that containing block’s size is indefinite, the used value for flex-basis is content.

As another corollary, flex-basis determines the size of the content box, unless otherwise specified such as by box-sizing.

Syntax:

flex-basis: number|auto;


1
2
Hello World
3
4
5

Example

.container {
  display: flex;
  flex-basis: auto;
}
Try this code ❯


flex

The flex is shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.

It specifies the components of a flexible length: the flex factors (grow and shrink) and the flex basis.

When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box.

If a box is not a flex item, flex has no effect.

The default values of the flex components are equivalent to flex: 0 1 auto;.

Syntax:

flex: flex-grow flex-shrink flex-basis|none|auto;


1
2
3
4
5

Example

.item3 {
  flex: 1 0 30%;
}
Try this code ❯


All CSS Flexbox Properties

Property Description
align-content Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.
align-items Sets the align-self value on all direct children as a group.
align-self Specifies the default alignment for items within the flex container.
display Specifies an element’s display type and can override an element’s defined presentation.
flex Sets how a flex item will grow or shrink to fit the space available in its flex container.
flex-basis Sets the initial main size of a flex item.
flex-direction Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
flex-flow A shorthand property for the flex-direction and the flex-wrap properties.
flex-grow Specifies the flex grow factor of a flex item's main size.
flex-shrink Sets the flex shrink factor of a flex item.
flex-wrap Sets whether flex items are forced onto one line or can wrap onto multiple lines.
justify-content Specifies the alignment between the items inside a flexible container when the items do not use all available space.
❮ Previous Home Next ❯