CSS - Flexbox

Flexbox

The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.

Flexbox deals with layout in one dimension at a time — either as a row or as a column. This can be contrasted with the two-dimensional model of CSS Grid Layout, which controls columns and rows together.

monday logo


Flex container properties

# Display: Flex / Inline-Flex

This defines a flex container, inline or block depending on the given value. It enables a flex context for all of its direct children.

1
2
3
1
2
3
display: flex
1
2
3
1
2
3
display: inline-flex

display: inline-flex does not make flex items display inline. It makes the flex container display inline.

# Flex-Direction

This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

1
2
3
4
flex-direction: row
1
2
3
4
flex-direction: row-reverse
1
2
3
4
flex-direction: column
1
2
3
4
flex-direction: column-reverse

In a row direction, the main axis is the horizontal one and the cross axis is vertical, but in a column direction it will be vertical main axis and horizontal cross axis.

# Flex-Wrap

This property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

1
2
3
4
5
6
7
8
9
10
flex-wrap: wrap
1
2
3
4
5
6
7
8
9
10
flex-wrap: wrap-reverse
1
2
3
4
5
6
7
8
9
10
flex-wrap: nowrap

# Justify-Content

Defines how the browser distributes space between and around content items along the main-axis of a flex container.

1
2
3
justify-content: flex-start
1
2
3
justify-content: flex-end
1
2
3
justify-content: center
1
2
3
justify-content: space-between
1
2
3
justify-content: space-around
1
2
3
justify-content: space-evenly

# Align-Items

Defines how to lay out the content items along the cross-axis of a flex container.

1
2
3
align-items: flex-start
1
2
3
align-items: flex-end
1
2
3
align-items: center
1
2
3
align-items: stretch
1
2
3
align-items: baseline

# Align-Content

This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

1
2
3
4
5
6
7
8
9
align-content: flex-start
1
2
3
4
5
6
7
8
9
align-content: flex-end
1
2
3
4
5
6
7
8
9
align-content: center
1
2
3
4
5
6
7
8
9
align-content: stretch
1
2
3
4
5
6
7
8
9
align-content: space-between
1
2
3
4
5
6
7
8
9
align-content: space-around

Note: this property has no effect when there is only one line of flex items.

# Flex-Flow: (shortend property)

A shorthand property for setting the following properties in a single declaration: flex-direction | flex-wrap.



Flex items properties

# Order

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

1
2
3
4
order:  1 =>  3  |  2 =>  1  |  3 =>  4  |  4 =>  2

# Flex-Grow

This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

1
2
1
1 => flex-grow: 1  |  2 =>  flex-grow:  2

# Flex-Shrink

This defines the ability for a flex item to shrink if necessary. It accepts a unitless value that serves as a proportion. It dictates how an item should be shrink if all items exceeds the available space.

1
2
1
1 => flex-shrink: 1  |  2 =>  flex-shrink:  2

# Flex-Basis

This property sets the initial main size of a flex item. The sizing applies according to the item's box-sizing type.

1
2
3
1 => flex-basis: 50%  |  2 =>  flex-basis: 50%  |  3 =>  flex-basis: 20%

# Align-Self

This allows the default alignment to be overridden for individual flex items.

1
2
3
align-items: flex-start
1 => align-self: flex-start  |  2 =>  align-self: center  |  3 =>  align-self: flex-end

Note: the available values for align-self are the same as in align-items (flex-start | flex-end | center | stretch | baseline).

# Flex: (shortend property)

A shorthand property for setting the following properties in a single declaration: flex-grow | flex-shrink | flex-basis.