The problem

What is the relationship between flex-wrap and align-self, align-items, and align-content when using flexbox layouts? Using flex-Wrap attributes on a container can have a different effect on subitems when you slice pages on a daily basis. See the following seven examples. The problem is confusion about how these properties interact.

Seven examples

In the original question, the author took seven examples in total. Due to space limitation, only words are listed in the first part. For details, please refer to the CodePen link listed at the end of each example. In addition, all examples are listed and explained in the fourth part at the end of the paper.

  1. The containerflex-wrap: nowrapThe child,align-self: flex-endEffective,CodePen;
  2. The containerflex-wrap: wrapThe child,align-self: flex-endNull and void,CodePen;
  3. The containerflex-wrap: nowrap + align-items: flex-endIt works for the children,CodePen;
  4. The containerflex-wrap: wrap +align-items: flex-endNot valid for children,CodePen;
  5. The containerflex-wrap: nowrap + align-content: centerNot valid for children,CodePen;
  6. The containerflex-wrap: wrap, there is noalign-items 和 align-contentThere will be gaps between the children,CodePen;
  7. The containerflex-wrap: wrapAnd get rid of italign-contentThe child,align-self: flex-endAnd it works,CodePen.

Of the seven examples: 1, 2 compare the influence of the flex-wrap attribute value on the align-self attribute of the sub-item. 3, 4 compare the influence of the flex-wrap attribute value on the align-items of the sub-item. 5, 6, 7 are different from the previous four. There is no contrast between these three.

answer

The flex-wrap property is used to control whether or not elements within it can be wrapped, and while this is a very basic property, it can have a significant impact on other aspects of the flexbox layout as well.

First, the flex-wrap attribute defines the type of flexbox container you use:

  1. flex-wrap: nowrapThe Flex container by definition is a single-line Flex container;
  2. The flex - wrap: wrap | wrap - reverseA Flex container for multi-line is defined.

Second, the align-items and align-self properties work in both single-line and multi-line Flex containers. However, this only works if there is space left on the axis.

align-content

The principle of

The Flexbox specification documentation gives four possible attribute keywords for alignment of a specific Flex item:

To fully understand how these four attributes work and what effect they have on specific elements, it is important to first understand the structure of the Flexbox layout.

Part one, understand the X and y axes in flexbox

X-axis and Y-axis

X (horizontal) and Y (vertical) axes in the Flexbox container

The contents of the Flexbox container only work on the X (horizontal) and Y (vertical) axes. The child elements, the ones we call Flex items, can be aligned along these two axes. And this is the most basic part of the alignment effect in the Flexbox container.

Main axis and cross axis

In the Flexbox layout, overlaying the X and y axes is called the main axis and the cross axis

Overlaying the X and y axes in the Flex layout is called the main axis and the cross axis. By default, the main axis is horizontal and the cross axis is vertical, and this is the initial value for flexbox specified in the Flexbox specification document (the initial value here refers to flex-direction: row and align-content: strecth). .

But unlike the X and y axes, the main axis and the cross axis can change positions.

The flex – direction attribute

The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction in which flex items are laid out.

5.1. Flex Flow Direction: the flex-direction property

In the figure above, the principal axis is in the horizontal direction and the intersecting axis is in the vertical direction. As mentioned earlier, this is the initial value of a Flexbox container. However, the orientation of the main axis and the cross axis can be changed by changing the flex-direction property. The value of this property controls the orientation of the main axis, which determines whether flex items are aligned horizontally or vertically.

It should also be made clear that the cross axis and the main axis are always perpendicular to each other.

The second part

  • In the Flex container, items are displayed as lines, known as “Flex lines”;
  • This “Flex line” is based onflex-directionChange in value, sometimesrow“And sometimes it iscolumn;
  • There can be one or more “Flex lines” in a Flex container. How many are there? It depends onflex-wrapThis value.

Single – line flex container

First, flex-wrap: Nowrap establishes a single-line Flex container, where all child Flex items are forced to sit on a line (even beyond the container, overflow).

CodePen link

A single-line Flex container

Multi – line flex container

Flex-wrap: Wrap or wrap-reverse produces a multi-line container in which the Flex container produces many lines.

CodePen link

A multi-line Flex container, with Flex-Direction: column, rendered vertically.

CodePen link

A multi-line Flex container with Flex-Direction: Row rendered horizontally.

The third part, alignment properties

The alignment attribute is applied to the main and cross axes, not (x and y).

When the Flex-direction attribute controls how an item is positioned in the flex layout, there are four attributes that define alignment and positioning of the item:

The effect of any one of these four attributes is permanently generated on an axis.

  • justify-contentOnly the main axis is affected.
  • The other threealign-*It only has an effect on cross.

A common mistake is to assume that these attributes only work on the X and y axes. For example, context-content only works horizontally, while align-items only works vertically. However, when flex-direction is set to column, the main axis is the Y-axis, and precision-content is applied to the interleaved, or vertical, axis.

This article will focus on cross axis alignment. If you are interested in spindle alignment and how the justify-content property works, see this: In CSS Flexbox, why are there no “context-items” and “context-self” properties? .

Definition:

The Flexbox layout specification provides three keyword attributes for alignment in cross-axis:

align-items/align-self

  • align-itemAttribute is applied to the Flex container. It specifies the alignment of items in the Flex container on the cross axis.
  • align-selfAttributes are applied to items in the Flex container, overwriting those specified by the external containeralign-itemsProperty, which also specifies alignment only on the cross axis.

Flex item can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the Align -self allows this default alignment to be overridden for individual Flex items.

8.3. Cross-axis Alignment: the align-items and align-self properties

Align-items /align-self has six values:

The initial value of align-items is stretch, which means that all flex items in the container are pulled up to the length of the cross axis. The initial value of align-self is auto, which means it directly inherits the initial value of the container’s align-item.

This illustration demonstrates the effect of these six values when flex-direction: Row is set.

align-content

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.

Packing Flex Lines: The align-content property

The align-content property is a little more complicated than the align-items and align-self properties. Compare align-items and align-self to move the baseline of the item itself on the cross axis. Align – Content moves the flex line of the container itself.

The six values of align-content:

This illustration demonstrates the effect of these six values when flex-direction: Row is set.

Why does align-content only work in multi-line Flex containers?

Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.

Packing Flex Lines: the align-content property

In single-line Flex containers, the cross size of the line is equal to the space on the cross axis of the container, meaning that there is no extra space between the line and the container. There is no room for align-content to play any role. In a single-line flex container, the cross size of the line is equal to the cross size of the container. This means there is no free space between the As a result, align-content can have no effect.)

The fourth part is the solution of different examples in the problem

Example a

A multi-line Flex container with Flex-Direction: Row rendered horizontally.

The flex-wrap of the container is set to nowRAP. As indicated above, this means that the container is a single-line Flex container. The align-content property of the single-line Flex container does not work. But align-items/align-self will do the trick.

CodePen link

Example 2

In contrast to example 1, it is not that the last item’s align-self: flex-end has no effect, but that the effect itself is affected by the container’s align-content: flex-start.

The container sets flex-wrap: wrap, which becomes a multi-line Flex container with align-content: The effect of the align-content attribute is only visible in the multi-Content container, where two lines of item elements are squeezed to the top of the container (flex-start). Meanwhile, the last item sets align-self: flex-end.

CodePen link

Example 3

Answer reference example 1.

Flex-wrap: nowrap makes the container itself a single-line Flex container. With align-items: flex-end, all the top space is freed and items are arranged at the bottom of the container.

CodePen link

Example 4

Answer reference example 2.

The container sets flex-wrap: wrap, so the container becomes a multi-line Flex container. Align -content: Flext-start then comes into play, squeezing two rows of items to the top of the container in a manner outlined by the red dotted line on the diagram, and arranging them one at a time.

CodePen link

Examples of five

The container sets flex-wrap: nowrap, so the container becomes a single-line Flex container. Although it is just one line, the height of the Flex line is not just at the top of the Flex container as indicated, but imagine that the height of the line already covers the entire container. As a result, there is no extra space in the container to squeeze free to the align contents: center property. However, it still works if you set align-items here or align-self on item.

CodePen link

Example 6

The container sets flex-wrap: wrap, so the container becomes a multi-line Flex container and align-content is set: “Stretch” means that the line of the container has two lines, and the space of the container is evenly allocated to two lines.

The gap is caused by subtracting the height of each line from the height of the item itself. In other words, if the number of items is large and the number of lines in the container is large, the gap will appear smaller, and vice versa.

CodePen link

Example 7

Align-content: stretches the space allocated to the lines in the container. Each row will have extra space (see example 6). Flex-end comes into play. If you change align-content to anything else here, such as flex-start, it will free up the extra space now, and align-items and align-self won’t do anything.

CodePen link