Learn CSS flex

Guide to quickly learn and apply flex layouts in your CSS files.

Why flex?

Flex is a single dimensional layout module. The flex properties enables elements to change position/ fit parent container without float or making its position as absolute.

How to make the container into a flex-box?

.container{
    display:flex;
    }

flex-direction

This makes the container into a flex parent. The immediate elements are arranged in a row with equal width and height based on the largest child element.

We can then change the arrangement of the child elements using flex-direction.

 flex-direction: row | row-reverse | column | column-reverse; 

With this we can arrange either vertically or horizontally. For horizontal arrangement we use row or row-reverese and for vertical arrangement we use column or column-reverse.

flex-direction

Flex parent properties

flex-wrap

The flex-wrap CSS 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.

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow

The flex-flow CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.

flex-flow:row wrap;

justify-content

The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.

 justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; 

align-content

The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.

 align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; 

align-items

The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.

 align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe; 

Flex-parent properties

Flex child properties

flex-grow

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

flex-grow: 0 | 1 | number;

flex-shrink

The flex-shrink CSS 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.

In use, flex-shrink is used alongside the other flex properties flex-grow and flex-basis, and normally defined using the flex shorthand.

flex-shrink: 0 | 1 | number;

order

New layout methods such as Flexbox and Grid bring with them the possibility of controlling the order of content. In this article, we will take a look at ways in which you can change the visual order of your content when using Flexbox. We will also consider the implications of reordering items from an accessibility point of view.

order: number; /* default is 0 */

align-self

The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.

 align-self: auto | flex-start | flex-end | center | baseline | stretch;

justify-self

The flex-shrink CSS 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.

In use, flex-shrink is used alongside the other flex properties flex-grow and flex-basis, and normally defined using the flex shorthand.

 justify-self: auto | flex-start | flex-end | center | baseline | stretch;

Flex-child properties