CSS Flexbox

To create columns, we use Flexbox.

display: flex

By default, when setting display: flex on an element, all the children will become columns.

.container {
  display: flex;
}

display: inline-flex

display: inline-flex allows multiple flex containers to appear inline with each other.

Flex containers can be nested inside each other by declaring display: flex or display: inline-flex for children of flex containers.

justify-content

We use a justify-content property to position the items from left to right.

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

There are five values for the justify-content property:

• flex-start: all items are positioned from the left of the parent container, with no extra space between or before them.
• flex-end: all items are positioned with the last item starting on the right side of the parent container, with no extra space between or after them.
• center: all items are positioned in the center of the parent container with no extra space before, between, or after them.
• space-around: items are positioned with equal space before and after each item, double the space between elements.
• space-between: items are positioned with equal space between them, but no extra space before or after the last elements.

#flexstart {
  justify-content: flex-start;
}

#flexend {
  justify-content: flex-end;
}

#center {
  justify-content: center;
}

#spacearound {
  justify-content: space-around;
}

#spacebetween {
  justify-content: space-between;
}

align-items

align-items align flex items vertically within the container.

• flex-start: all elements are at the top of the parent container.
• flex-end: all elements are at the bottom of the parent container.
• center: the center of all elements is positioned halfway between the top and bottom of the parent container.
• baseline: the bottom of the content of all items are aligned with each other.
• stretch: the items will stretch from top to bottom of the container if possible.

#flexstart {
  align-items: flex-start;
}

#flexend {
  align-items: flex-end;
}

#center {
  align-items: center;
}

#baseline {
  align-items: baseline;
}

align-content

align-items can align elements within a single row.

If a flex container has multiple rows of content, align-content can space the rows from top to bottom.

align-content accepts six values:

• flex-start: all rows of elements are positioned at the top of the parent container with no extra space between.
• flex-end: all rows of elements are positioned at the bottom of the parent container with no extra space between.
• center: all rows of elements are positioned at the center of the parent element with no extra space between.
• space-between: all rows of elements are spaced evenly from the top to the bottom of the container with no space above the first or below the last.
• space-around: all rows of elements are spaced evenly from the top to the bottom of the container with the same amount of space at the top and bottom and between each element.
• stretch: if a minimum height or no height is specified, the rows of elements stretch to fill the parent container from top to bottom (default value).

#flexstart {
  align-content: flex-start;
}

#flexend {
  align-content: flex-end;
}

#center {
  align-content: center;
}

#between {
  align-content: space-between;
}

#around {
  align-content: space-around;
}

flex-grow

flex-grow specifies if items should grow to fill a container and which ones should grow proportionally more or less than others.

.container {
  display: flex;
}

.side {
  width: 100px;
  flex-grow: 1;
}

.center {
  width: 100px;
  flex-grow: 2;
}

flex-shrink

flex-shrink specifies which elements will shrink and in what proportions. The default value of flex-shrink is 1.

flex-basis

flex-basis specifies the width of an item before it stretches or shrinks.

.side {
  flex-grow: 1;
  flex-basis: 150px;
}

flex

The flex property can declare flex-grow, flex-shrink, and flex-basis all in one line.

.side {
  flex: 2 1 150px;
}

flex-wrap

flex-wrap moves flex items to the next line when necessary.

• wrap: child elements of a flex container that don’t fit into a row will move down to the following line.
• wrap-reverse: similar to wrap, but in reverse order.
• nowrap: prevents items from wrapping. This is the default value.

#wrap {
  flex-wrap: wrap;
}

#nowrap {
  flex-wrap: nowrap;
}

#reverse {
  flex-wrap: wrap-reverse;
}

flex-direction

Flex containers have two axes: a major axis and a cross axis.

The major axis has these properties:

• justify-content
• flex-wrap
• flex-grow
• flex-shrink

The cross axis has these properties:

• align-items
• align-content

We can switch the major axis and cross axis with flex-direction. For example, if we add flex-direction: column;, the flex items will be ordered vertically, not horizontally.

The flex-direction accepts these values:

• row: elements will be positioned from left to right across the parent element starting from the top left corner (default).
• row-reverse: elements will be positioned from right to left across the parent element starting from the top right corner.
• column: elements will be positioned from top to bottom of the parent element starting from the top left corner.
• column-reverse: elements will be positioned from the bottom to the top of the parent element starting from the bottom left corner.

#row {
  flex-direction: row;
}

#row-reverse {
  flex-direction: row-reverse;
}

#column {
  flex-direction: column;
}

#column-reverse {
  flex-direction: column-reverse;
}

flex-flow

flex-flow declares both the flex-wrap and flex-direction.

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

#column {
  flex-flow: wrap column;
}