CSS Flexbox

Flexbox is a new layout mode in css3. The CSS3 flexbox is used to make the elements behave predictably when they are used with different screen sizes and different display devices. It provides a more efficient way to layout, align and distribute space among items in the container.
The flexbox contains flex containers and flex items.

Flex container

A flex container is a section of a document that has been put out using flexbox. To build a flex container, change the display property of the area's container to flex or inline-flex. The parent's properties are specified by the flex container. It's stated by setting an element's display attribute to flex or inline-flex.

Flex item

The children's properties are specified by the flex items. A flex container may hold one or more flex objects.

The attributes of the flex item are as follows:

• Order
• Flex-grow
• Flex-shrink
• Flex-basis
• Flex
• Align-self

The order property

it specifies the order of a flexible item relative to the rest of the flex items inside the same container.
<div style="display:flex;flex-direction:column">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
output

Flex grow property

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.
<div style="display:flex">
<div style="flex-grow: 1; border:1px solid red">1</div>
<div style="flex-grow: 1; border:1px solid red">2</div>
<div style="flex-grow: 8; border:1px solid red">3</div>
</div>
output

Flex-shrink property

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items. The value must be a number.

Flex-basis property

The flex-basis property specifies the initial length of a flex item.
<div style="display:flex">
<div style="border:1px solid red">1</div>
<div style="border:1px solid red">2</div>
<div style="flex-basis:200px;border:1px solid red">3</div>
</div>
output

The align-self property

The align-self property specifies the alignment for the selected item inside the flexible container.
The align-self property overrides the default alignment set by the container's align-items property.
<div style="display:flex;height: 200px">
<div style="border:1px solid red">1</div>
<div style="border:1px solid red">2</div>
<div style="align-self: center; border:1px solid red">3</div>
<div style="border:1px solid red">4</div>
</div>
output