CSS Flexbox

Vinayak Mittal

Nov 29, 2020·6 min read

What is CSS Flexbox model?

The CSS flexbox model is used to make the elements behave predictably when they are used with several screen sizes and different display devices. It provides a more dynamic or flexible way to layout, align and distribute space among items in the container.

The CSS flexbox can control the following aspects of the layout:

• The direction to which the items are displayed.
• The wrapping of items when the window is resized.
• The Justification of items and space in between.
• The vertical alignment of items.
• The alignment of lines of items.
• The order of items in a line.
• The alignment of an individual item.

Note: We can do all of this without CSS Flexbox but is will be more complex.

Basic Terminology of CSS Flexbox model:

• Main axis: The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property.
• main-start | main-end: The flex items are placed within the container starting from main-start and going to main-end.
• main size: The flex item’s main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension.
• cross-start | cross-end — Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
• cross-axis — The axis perpendicular to the main axis is called the cross axis.
• cross size — The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.

Some Basic Properties of CSS Flexbox:

flex-direction

The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

Value:

• row: Default value. The flexible items are displayed horizontally, as a row.
• row-reverse: Same as row, but in reverse order.
• column: The flexible items are displayed vertically, as a column.
• column-reverse: Same as a column, but in reverse order.

For Example:

HTML File:

<h4>This is a Column-Reverse</h4>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="content1">
  <div class="box1" style="background-color:red;">A</div>
  <div class="box1" style="background-color:lightblue;">B</div>
  <div class="box1" style="background-color:yellow;">C</div>
</div>

CSS File:

for column-reverse:

#content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-direction: column-reverse;
}

.box {
  width: 50px;
  height: 50px;
}

for row-reverse:

#content1 {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-direction: row-reverse;
}

.box1 {
  width: 50px;
  height: 50px;
}

Output:

justify-content

The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of a flex container, and the inline axis of a grid container.

Values:

• flex-start: Default value. Items are positioned at the beginning of the container.
• flex-end: Items are positioned at the end of the container.
• center: Items are positioned at the center of the container.
• space-between: Items are positioned with space between the lines.
• space-around: Items are positioned with space before, between, and after the lines.

#container {
  display: flex;
  justify-content: space-between;
}

#container > div {
  width: 100px;
  height: 100px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}

Output:

just the change the value of justify-content to flex-end.

justify-content: flex-end;

Output:

align-items

The align-items property specifies the default alignment for items inside the flexible container.

• stretch(Default value): Items are stretched to fit the container.
• center: Items are positioned at the center of the container.
• flex-start: Items are positioned at the beginning of the container.
• flex-end: Items are positioned at the end of the container.
• baseline: Items are positioned at the baseline of the container.

.container { 
   display: flex; 
   align-items: flex-start;
}

flex-wrap

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

Values:

• nowrap: Default value. Specifies that the flexible items will not wrap.
• wrap: Specifies that the flexible items will wrap if necessary.
• wrap-reverse: Specifies that the flexible items will wrap, if necessary, in reverse order.

div {
 display: flex; 
 flex-wrap: wrap;
}

for example:

align-content

The CSS align-content property sets the distribution of space between and around content items along a flexbox’s cross-axis or a grid’s block axis.

Note: This property only takes effect on multi-line flexible containers, where flex-flow is set to either wrap or wrap-reverse). A single-line flexible container (i.e. where flex-flow is set to its default value, no-wrap) will not reflect align-content.

Values:

• stretch: Lines stretch to take up the remaining space.
• center: Lines are packed toward the center of the flex container.
• flex-start: Lines are packed toward the start of the flex container.
• flex-end: Lines are packed toward the end of the flex container.
• space-between: Lines are evenly distributed in the flex container.
• space-around: Lines are evenly distributed in the flex container, with half-size spaces on either end.

flex-flow

The flex-flow property is a shorthand property for:

• flex-direction.
• flex-wrap.

Syntax:

div {
  flex-flow: row-reverse wrap;
}

order

By default, flex items in the container appear in the same order in which they come in code (source order). You can change this sequence with the order property.

You have to assign a negative or positive number as its value. According to these numbers, the items will be re-ordered. The lowest numbers go first (negative value goes before 0 and positive numbers).

HTML File:

<div class="flex-container"><div class="flex-item box-1" >1</div>
<div class="flex-item box-2" >2</div>
<div class="flex-item box-3" >3</div>
<div class="flex-item box-4" >4</div>
<div class="flex-item box-5" >5</div></div>

CSS File:

.flex-container {
display: flex;
border: 1px solid #eee;
border-radius: 2px;
}.flex-item {
width: 100px;
margin: 10px;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
line-height: 100px;
font-size: 30px;
color: white;
}.box-1 {
background-color: #eabfcb;
order: 2;
}.box-2 {
background-color: #c191a1;
order: 3;
}.box-3 {
background-color: #a4508b;
order: 1;
}.box-4 {
background-color: #5f0a87;
order:5;
}.box-5 {
background-color: #2f004f;
order: 4;
}

Output:

}