Summary of “Flexbox, Part 1”

Flexbox

Flexbox is a CSS mechanism that allows you to control the size, order, and alignment of items along several axes, the distribution of free space between items, and much more.

In order to enable the flexbox, you need to assign the display: flex; property to the item. Then:

1. The item containing display: flex; is transformed into a flex container.
2. The immediate children of this item will be transformed into flex items, and they will start to be arranged according to the new rules.

Main and Cross Axes

Axes represent one of the basic concepts in Flexbox.

When a document flows normally, blocks and text are arranged from left to right and from top to bottom.

Under the traditional block model, the directions “left”, “right”, “top”, and “bottom” cannot be changed. But within a flex container you can modify these concepts, since you can change the typical direction of the flow.

• The main axis of the flex container is the direction along which all of its child items are arranged. The flex items flow along the main axis from the start to the end of it.
• We call the direction that is perpendicular to the main axis the cross axis. The “vertical” alignments are made along this axis.

In our left-to-right examples, by default the main axis flows from left to right, but it can be rotated in all directions using the flex-direction property, which is assigned for the flex container. Property values:

• The default value is row – The main axis flows from left to right.
• column — The main axis flows from top to bottom.
• row-reverse — The main axis flows from right to left.
• column-reverse — The main axis flows from bottom to top.

The cross axis is always perpendicular to the main axis, and when the latter is rotated, the former rotates too to stay perpendicular. In our left-to-right examples without reverse wrapping:

• If the main axis flows horizontally, then the cross axis will flow vertically down.
• If the main axis flows vertically, then the cross axis will flow to the right.

These directions describe our examples without reverse wrapping. The wrap-reverse value reverses the cross-axis direction.

Arrangement of Flex Items

Main axis alignment

The justify-content CSS property determines how items are aligned along the main axis. Available values for justify-content:

• The default value is flex-start – Items are arranged at the start of the main axis.
• flex-end — Items are arranged at the end of the main axis.
• center — Items are arranged in the center of the main axis.
• space-between — Items are arranged so that the distances between adjacent ones are uniform, and no extra space is added between the items and the edges of the flex container.
• space-around — Items are arranged in such a way that the distances between neighboring items are uniform, and there is added space between the items and the edges of the flex container that is equal to half of the added space between neighboring items.

Alignment along the cross axis

The align-items CSS property determines how items are aligned along the cross axis. Available values for align-items:

• Default value of stretch – Items with an automatic cross size stretch to fill their flex line along the cross axis (height in a row layout).
• flex-start — Items are arranged at the start of the cross axis.
• flex-end — Items are arranged at the end of the cross axis.
• center — Items are arranged in the center of the cross axis.
• baseline — Items are aligned along the baseline of the text inside them.

The arrangement of items along the main axis using justify-content is assigned for the entire flex container, and the property applies to all flex items equally. There is no individual-item equivalent of justify-content. This property distributes the group as a whole.

The cross alignment can be assigned to each item separately. To do this, you can use the align-self property, which is assigned for the flex items themselves and not for the flex container. You can use the same alignment values with align-self as with align-items.

Wrapping Flex Items

If you add more flex items to a container than can fit in a single row, then

• by default, they shrink as needed, without going below their minimum width.
• Even if you assign a width to them, the flexbox mechanism can override this setting and shrink it.
• If they can no longer be fit in a container after they are shrunk, they will overflow its boundaries, but they will continue to be placed in a single row.

To avoid this, you need to use the flex-wrap flex container property. It has three values:

• The default value nowrap — Flex items stay on a single line.
• wrap — Flex items can wrap onto a new line. Rows of items are arranged along the cross axis, where the first row is at the start of the cross axis and the last is at the end.
• wrap-reverse — Flex items can also wrap onto a new line. The cross-start and cross-end directions swap, so the rows stack in the opposite cross-axis direction.

Aligning Lines in the Flex Container

The align-content property controls the alignment of rows of flex items along the cross axis. It and the justify-content property have very similar values:

• The default value stretch stretches the rows of flex items, with an equal share of the remaining free cross-axis space added to each row. How items are displayed within the lines depends on the value of align-items:
  1. If align-items has been assigned the value stretch, then the items with an automatic height in the lines will be stretched to the entire height of their respective lines.
  2. If the value differs from stretch, then the items in the rows keep their specified or content-based height and are aligned in the rows depending on the value of align-items.
• flex-start — Arranges rows of flex items at the start of the cross axis,
• flex-end — Arranges rows of flex items at the end of the cross axis,
• center - Arranges rows of flex items in the middle of the cross axis so that there is no added space between adjacent rows, and the distance between the first row and the edge of the flex container is equal to the distance between the last row and the other edge.
• space-between - Evenly distributes the rows of flex items along the cross axis. The distances between adjacent rows are the same, but there is no added space at the edges.
• space-around - Evenly distributes the rows of flex items along the cross axis. The distances between adjacent rows are the same, but the added spaces at the edges are equal to half of the added space between neighboring rows.

The align-content property controls the position and size of the rows along the cross axis, while align-items controls the alignment of the flex items within each row. In a wrapping flex container, these properties work together whether there is one row or several rows.

Previously the specification prescribed different behavior based on the number of rows:

• if there was only one row of flex items, align-content had no effect, even if wrapping was allowed;
• if there were several rows, align-content aligned the rows, while align-items aligned the items within each row.

The specification now makes this distinction based on flex-wrap: align-content has no effect with nowrap, but applies with wrap or wrap-reverse, even if all items fit in one row. You may encounter the old single-row behavior in an old browser version.

The Flex Item Sequence Number

The order in which flex items are displayed visually can be changed using the order property, which is used to assign a sequence number to the flex item without having to change the HTML code.

By default, the sequence number of the flex items is equal to 0, and the items are sorted in ascending order according to this value. The sequence number is an integer, which can be either positive or negative.

Using Flexboxes

Perfect Alignment

You can use a flexbox to center an item vertically and horizontally so that the alignment is maintained when the item or container is resized.

To do this, you need to set the flexbox layout for the container and margin: auto for the child flex item. In this case, the flex item will shrink in size to match the content and will be centered along the vertical and horizontal axes.

Flexible Menus

Flexbox is useful if you need to create a layout in which the items are evenly distributed across the menu block, where the first item is nearly aligned to the left side of the menu block, and the last item is nearly aligned to the right side, with small added spaces at the edges.

To do this, you need to set the flexbox layout for the menu. Then the items will become flex items. Then you can use the justify-content: space-around; property for arranging items to achieve the desired result.

If you add another item to the menu, the spacing between the menu items will change “flexibly” and adapt to the new conditions.

Sorting Items in CSS

By using Flexbox and the checkbox selector :checked ~ at the same time, you can control the order of the flex items using this selector by changing the direction of the main axis using flex-direction.

The effect works best when the direction of the main axis changes from “top to bottom” to “bottom to top”. In this case, the flex container should be after the checkbox in the markup, with both elements sharing the same parent.

Blocks with Uniform Height

The usual block model has a fundamental drawback: the neighboring blocks are totally unaware of each other, so there is no way to control their heights as a group. It should be borne in mind that the contents of the blocks may differ and their heights may vary.

You can implement a layout using blocks of the same height using Flexbox. The flex items are stretched by default to the height of their flex line in this row layout. To do this, just assign display: flex; to the parent block.