The Ultimate Guide to Flexbox.

Quickies.

• What is Flexbox?
• The Flexbox Container.
• The Flexbox Axes.
• Flex Container Properties.
• Flex Direction Property.
• Flex Wrap Property.
• Flex Flow Property.
• Justify Content Property.
• Align Items Property.
• Align Content Property.
• Flex Items Properties.
• Order Property.
• Flex Grow Property.
• Flex Shrink Property.
• Flex Basis Property.
• Flex Property.
• Align Self Property.

What is Flexbox?

The Flexible Box Module, or Flexbox, is a responsive layout structure with the ability to change its contents’ width, height and order to fill a space without using floats or positions. Flexbox is made up of 2 main components, the container (parent element) and items (children). Items are placed inside containers and are able to expand to fill available space and shrink to avoid overflow.

The Flexbox Container.

The Flexbox container is simply an HTML element, such as a div or section, with the display property set to flex or inline-flex. Once you define a container with flex or inline-flex, all items in that container are automatically flex items. Flexbox has a large set of properties. Some are meant to be set on the container and others are only for the items.

• flex: Container behaves like a block-level element and all children are flex items.
• inline-flex: Container behaves like an inline element and all children are flex items.

The Flexbox Axes.

It is important to understand how the axes work in flexbox because many things depend on how these are defined. Every flexbox container has a main axis and a cross axis. The main axis is defined by the flex-direction property and the cross axis runs perpendicular to it. The default setting for this property is row which makes the items and the main axis run from left to right.

If the flex-direction property of the flexbox container is set to row or row-reverse, the main axis will run horizontally and the cross axis will run vertically.

If the flex-direction property of the flexbox container is set to column or column-reverse, the main axis will run vertically and the cross axis will run horizontally.

Flex Container Properties.

These are the properties you can define on a flex container:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

Flex Direction Property.

The flex-direction property is very important because it establishes the main axis and defines the order of the items. The default value for flex-direction is row.

• row
• row-reverse
• column
• column-reverse

flex-direction: row (default)

Items align from left to right.

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

flex-direction: row-reverse

Items align from right to left.

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

flex-direction: column

Items align from top to bottom.

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

flex-direction: column-reverse

Items align from bottom to top.

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

Flex Wrap Property.

The flex-wrap property determines if the items in the container are allowed to wrap to a new line or not. The default value for flex-wrap is nowrap.

• nowrap
• wrap
• wrap-reverse

flex-wrap: nowrap (default)

Items will not wrap to the next line.

.container {
  display: flex;
  flex-wrap: nowrap;
}

flex-wrap: wrap

Items will wrap to the next line.

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

flex-wrap: wrap-reverse

Items will wrap to the next line in reverse order.

.container {
  display: flex;
  flex-wrap: wrap-reverse;
}

Flex Flow Property.

The flex-flow property is a shorthand property that combines flex-direction and flex-wrap. You can define one or two values and the order is not important.

flex-flow: row wrap

.container {
  display: flex;
  flex-flow: row wrap;
}

flex-flow: row-reverse nowrap

.container {
  display: flex;
  flex-flow: row-reverse nowrap;
}

Justify Content Property.

The justify-content property is used to align items on the main axis. The default value for justify-content is flex-start.

• flex-start
• flex-end
• center
• space-around
• space-between

justify-content: flex-start (default)

Items will align to the starting edge of the container on the main axis.

.container {
  display: flex;
  justify-content: flex-start;
}

justify-content: flex-end

Items will align to the ending edge of the container on the main axis.

.container {
  display: flex;
  justify-content: flex-end;
}

justify-content: center

Items will align to the center of the container on the main axis.

.container {
  display: flex;
  justify-content: center;
}

justify-content: space-around

This will distribute the space evenly before and after each item on the main axis.

.container {
  display: flex;
  justify-content: space-around;
}

justify-content: space-between

This will distribute the space evenly between each item on the main axis.

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

Align Items Property.

The align-items property is used to align items on the cross axis. The default value for align-items is stretch.

• stretch
• center
• flex-start
• flex-end
• baseline

align-items: stretch (default)

Items will stretch to fill the container on the cross axis.

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

align-items: center

Items will align to the center of the container on the cross axis.

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

align-items: flex-start

Items will align to the starting edge of the container on the cross axis.

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

align-items: flex-end

Items will align to the ending edge of the container on the cross axis.

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

align-items: baseline

Items will align to their baseline on the cross axis.

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

Align Content Property.

The align-content property is used to align the flex lines on the cross axis. The default value for align-content is stretch.

• stretch
• center
• flex-start
• flex-end
• space-between
• space-around

align-content: stretch (default)

Lines will stretch to fill the container on the cross axis.

.container {
  display: flex;
  align-content: stretch;
  flex-wrap:wrap;
}

align-content: center

Lines will align to the center of the container on the cross axis.

.container {
  display: flex;
  align-content: center;
  flex-wrap:wrap;
}

align-content: flex-start

Lines will align to the starting edge of the container on the cross axis.

.container {
  display: flex;
  align-content: flex-start;
  flex-wrap:wrap;
}

align-content: flex-end

Lines will align to the ending edge of the container on the cross axis.

.container {
  display: flex;
  align-content: flex-end;
  flex-wrap:wrap;
}

align-content: space-between

This will distribute the space evenly before and after each line on the main axis.

.container {
  display: flex;
  align-content: space-between;
  flex-wrap:wrap;
}

align-content: space-around

This will distribute the space evenly before and after each line on the main axis.

.container {
  display: flex;
  align-content: space-around;
  flex-wrap:wrap;
}

Flex Items Properties.

These are the properties you can define on a flex item:

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

Order Property.

The order property is used to re-order items. The default value for order is 0.

order: 0 (default)

Define the order of the items.

.item1{
  order:3;
}
.item2{
  order:1;
}
.item3{
  order:2;
}

Flex Grow Property.

The flex-grow property defines how much an item will grow relative to the other items in the container. The default value for flex-grow is 0.

flex-grow: 0 (default)

.item1{
  flex-grow:3;
}
.item2{
  flex-grow:1;
}
.item3{
  flex-grow:1;
}

Flex Shrink Property.

The flex-shrink property defines how much an item will shrink relative to the other items in the container. The default value for flex-shrink is 1.

flex-shrink: 1 (default)

Setting flex-shrink to 0 tells that item to not shrink. Setting a higher number tells the item to shrink more than the other items.

.item1{
  flex-shrink:3;
}
.item2{
  flex-shrink:0;
}
.item3{
  flex-shrink:1;
}
.item4{
  flex-shrink:1;
}

Flex Basis Property.

The flex-basis property defines the default width of a flex item.

flex-basis:

.item1{
  flex-basis:100px;
}
.item2{
  flex-basis:240px;
}
.item3{
  flex-basis:100px;
}
.item4{
  flex-basis:100px;
}

Flex Property.

The flex property is shorthand for flex-grow, flex-shrink and flex-basis. The default value for flex is 0 1 auto. The last two values, flex-shrink and flex-basis, are not required.

Align Self Property.

The align-self property defines the alignment of a specific item inside the container.

• auto
• center
• flex-start
• flex-end
• baseline
• stretch

align-self:

.item1{
  align-self:auto;
}
.item2{
  align-self:flex-start;
}
.item3{
  align-self:center;
}
.item4{
  align-self:flex-end;
}

Additional Posts.

WooCommerce

---

How to Edit WooCommerce Product Tabs.

Read More

WordPress

---

How to Use Gravity Forms Ready Classes.

Read More

Web Development

---

How to Create FTP Account in cPanel.

Read More