Flexbox

What is flexbox?

Flexbox is the one-dimensional layout model. Which helps to align elements in a row direction or column direction. It gives flexibility to the user interface for responsive web pages.

Display Flex

By default, the display property is a column direction when the flex is applied to the display and turns into a Row direction property.

syntax

.parentContainer {
  display: flex; 
}

Properties of display Flex

Flex direction

Flex Direction Row

The row is the default property of flexbox

.parentContainer {
 display: flex; 
 flex-direction: row ;
}

Flex Direction Row-Reverse

Reverse the row items of the flexbox from Left to Right and Right to left

.parentContainer {
 display: flex; 
 flex-direction: row-reverse ;
}

Flex Direction Column

Align all items into one column.

.parentContainer {
 display: flex; 
 flex-direction: column ;
}

Flex Direction Column-Reverse

Reverse the column items of the flexbox from Left to Right and Right to left.

.parentContainer {
 display: flex; 
 flex-direction: column-reverse ;
}

Wrapping your content

Flex-Wrap

The flex-wrap property contains three values to make items responsive and wrap items with flexibility with the screen size of the display. It allows you to wrap your content when needed.

By default, it is nowrap

Flex-wrap: wrap

Wrap will wrap the content into multiple lines from top to bottom approach.

.parentContainer {
 display: flex; 
 flex-wrap: wrap ;
}

Flex-wrap: wrap-reverse

wrap-reverse will wrap the content into multiple lines from the bottom bottom approach.

Most important and widely used part of the flexbox

Justify -content

Flex-start

Default property, Items start from the left side.

.parentContainer {
 display: flex; 
Justify -content: flex-start;


}

Flex-end

Items start from the right side of the web page.

.parentContainer {
 display: flex; 
Justify -content: flex-end;
}

Center

This is the most used property of the flexbox. This makes items to the center along the horizontal line. and for verticle, we used the align-items property.

.parentContainer {
 display: flex; 
Justify-content: center;
align-items: center;
}

Space-around, Space between, and space evenly

Space-around: Spreads space around the items with equal space but when items have their own space they took their space also.

.parentContainer {
 display: flex; 
Justify-content: space-around;

}

Space between: Spreads space between the items with equal space. the first item at the start and the last item at the end of the web page.

.parentContainer {
 display: flex; 
Justify-content: space-between;

}

Space evenly: Spreads space evenly for the items with equal space.

.parentContainer {
 display: flex; 
Justify-content: evenly;

}

Align Items

flex-start and flex-end

items are placed at the start of the cross-axis and with flex-end items are placed at the end of the cross-axis

.parentContainer {
 display: flex; 
align-items: flex-start;

}

.parentContainer {
 display: flex; 
align-items: flex-end;

}

Center

Used for align-items vertically center, generally used with justify-content center.

.parentContainer {
 display: flex; 
Justify-content: center;
align-items: center;
}

Stretch

Stretch all content elements and fill the container.

.parentContainer {
 display: flex; 
align-items: stretch;
}

Row gap and Column gap

Provides gap between rows and columns.

.parentContainer {
 display: flex; 
row-gap:10px;
column-gap:30px;
}

Short-hand of Gap

.parentContainer {
 display: flex; 
gap: 10px 30px;
/* represent Row and column respectively */
}

Some propeties for Flex-item(individual item or multiple items)

Order

With the order, you can place the specific item in a specific location.

#item{
    order:2;
}

Flex-grow and Flex-shrink

With this property, you can grow the specific item or shirk the item as needed.

#item{
  flex-grow:3;
}

#item{
  flex-shrink:2;
}

align-self

Using this property you can align separate items to Flex-start, flex-end, center, stretch, and baseline.

#item{
align-self: center;
}