Layout Basics With Flexbox

In CSS, Flexbox provides the most efficient way of aligning spaces and layouts within a container. It is mainly used for small layouts.

In Flex, some of the properties are set on the container (parent element, called "flex container") while others are set on the children (called "flex items").

Properties for the Parent(flex container)

Display Property

• This is the initial property you need to put in the flex container.

    .parent{
        display: flex;
    }

Flex Direction

• Specifies the direction in which its child elements should follow. Its values can be-

    .parent{
    display: flex;
    flex-direction: row | row-reverse | column | column-reverse;
    }

• row : Items are placed the same as the text direction
• row-reverse : Items are placed opposite to the text direction
• column : Items are placed top to bottom
• column-reverse : Items are placed bottom to top

Note - default direction is row

Flex-wrap

• By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

• Default is nowrap.

• When you have items in the container that does not fit in one line and you want it to be responsive, then we apply flex-wrap: wrap;. when the screen size is less, then it automatically fits the content and the rest items go to a new line.

.parent{
    display: flex;
    flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap : Every item is fit to a single line
• wrap : Items wrap around additional lines
• wrap-reverse : Items wrap around to additional lines in reverse

Align-content

• The default behavior of how flex items are displayed horizontally is defined here.

.parent{
  align-content:stretch | flex-start | flex-end | center | baseline;
}

• flex-start : Lines are packed at the top of the container
• flex-end : Lines are packed at the bottom of the container
• center : Lines are packed at the vertical center of the container
• space-between : Lines display with equal spacing between them
• space-around : Lines display with equal spacing around them
• stretch : Lines are stretched to fit the container

Justify-Content

• The default behavior of how flex items are displayed vertically is defined here.

.parent{
  justify-content:flex-start| flex-end| center| space-between| space-around| space-evenly;
}

• Flex-start: items are towards the start of the flex-direction.
• Flex-end : towards the end.
• center : at the center.
• space-between: Items are evenly distributed in the line; first item is on the start line, last item on the end line .
• space-around: Items are evenly distributed in the line with equal space around them. Each item has equal space around them, look at the illustration carefully.
• space-evenly: Items are distributed so that the spacing between any two items (and the space to the edges) is equal.

Properties for the Children(flex items) -

Order

• By default, Flex items are displayed in the same order as they appear in the source document. The order property allows you to change this order.

example:

.item{
  order:5;
}

Flex-grow

• According to this value, the item within the container will grow relative to the other flexible items.

.item{
  flex-grow:1;
}

Flex-shrink

• Whenever the size of all flex items exceeds the size of the flex container, the items shrink to fit according to the flex shrinking parameters.

.item {
  flex-shrink: 3; 
}

Flex-basis

• When the box-sizing property is not set, the flex-basis CSS property sets the initial main size of the flex item.

.item {
  flex-basis:  | auto;
}

Align-self

• It allows overriding align-items values for specific flex items. It has 5 values and auto.

.item{
  align-self:auto | flex-start | flex-end | center | baseline | stretch;
}