Flexbox

Before we look into the CSS flexbox, we will look into float and clear.

Flex Box Structural Diagram

The Float Property

Float property is simple. it just flows the element towards left/right.

Flex Property

The Clear Property

Used to clear the float. It specifies what elements can float beside a given element.

Aims at providing a better way to layout, align and distribute space among items in a container.

.container {

display: flex;

}

Flex Direction Property

Defines the direction forwards which items are laid. Can be row, row-reverse, column, column-reverse.

Flex property for Parent (Flex Container)

Following are the properties for the flex parent.

1. Flex-wrap:- can be wrap, nowrap, wrap-reverse. Wrap items as needed with this property.

2. Justify-Content:- Defines alignment along the main axis.

3. Align-items:- Defines alignment along cross axis.

4. Align-Content:-Aligns a flex Container’s lines when there is extra space in the Cross axis.

Flex properties for the children (Flex items).

1. Order:- Controls the order in which the items appear in the flex container.

2. Align-Self:- Allows default alignment to be over hidden for the individual flex items.

3. Flex-grow:- Defines the ability for a flex item to grow.

4. Flex-shrink:- Specifies how much a flex item will shrink relative to the rest of the items.