CSS Flexbox

CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.

Flex direction

The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

flex-direction: row

flex-direction: column

flex-direction: row-reverse

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

justify-content: flex-end

justify-content: space-between

justify-content: space-around

justify-content: space-evenly

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. align-self CSS property overrides a grid or flex item's align-items value.

align-items: flex-start

align-items: flex-end

align-items: center

align-items: stretch

Flex wrap

CSS flexbox has a feature to split a flex item into multiple rows (or columns). By default, a flex container will fit all flex items together. For example, a row will all be on one line.

flex-wrap: wrap;

flex-wrap: no-wrap;

flex-wrap: wrap-reverse;

Flex grow, shrink, and basis

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

flex-grow: 1; flex-grow: 2; flex-grow: 3; flex-grow: 4;

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.

flex-shrink: 1; flex-shrink: 2; flex-shrink: 3; flex-shrink: 4;

The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.

flex-basis: 100px; flex-basis: 200px; flex-basis: 300px; flex-basis: 400px;

There is a shortcut available to set several flex properties at once. The flex-grow, flex-shrink, and flex-basis properties can all be set together by using the flex property. The default property settings are flex: 0 1 auto;.

flex: 0 1 auto; flex: 1 1 auto; flex: 2 1 50px; flex: 1 4 auto

Order

The order property is used to tell CSS the order of how flex items appear in the flex container. By default, items will appear in the same order they come in the source HTML. The property takes numbers as values, and negative numbers can be used.

order: 1; order: -1; order: 10; order: 2;