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

Nowrap

.flexbox {
  flex-wrap: nowrap;
}

Wrap

.flexbox {
 flex-wrap: wrap;
}

Wrap-reverse

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