CSS-Flexbox

What is Flexbox?

Flexible Box Layout (Flexbox) is a CSS3 web layout model. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size.Flexbox consists of Flexbox Container and Flex items

Flex-Container

The outer box, which contains flex-items, is created using display: flex;

.flexbox {display: flex}

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

Flex-Items

Direct children of the flex container

Flex-Direction

Column

.flexbox { flex-direction: column;}

Row

.flexbox { flex-direction: row;}

Column-reverse

.flexbox { flex-direction: column-reverse;}

Row-reverse

.flexbox { flex-direction: row-reverse;}

Justify-Content

Space-between

.flexbox { justify-content: space-between;}

Space-Evenly

.flexbox { justify-content: space-evenly;}

Space-around

.flexbox { justify-content: space-around;}

Align Items

Center

.flexbox { align-items: center;}

Flex-start

.flexbox { align-items: flex-start;}

Flex-end

.flexbox { align-items: flex-end;}

Flex-Wrap Properties

Wrap

.flexbox { flex-wrap: wrap;}

Nowrap

.flexbox {  flex-wrap: nowrap;}

Wrap-reverse

.flexbox {  flex-wrap: wrap-reverse;}