flex-wrap controls the line wrapping behavior of child elements of elastic containers. It has three values: nowrap (there is no line break by default), wrap (the line break is allowed, the direction is from top to bottom, left to right), wrap-reverse (the line break is allowed, the direction is from bottom to top). If the project does not wrap the line as expected, it may be because the project width is too small or too large and the container width is undefined. It can be adjusted by min-width, percentage width or flex-grow respectively. After a new line, you can set the row-gap and column-gap to row-gap. wrap-reverse is often used in special layouts such as bottom alignment or reverse arrangement. Use flex-wrap reasonably to combine width and spacing settings to achieve flexible layout effects.

The flex-wrap attribute of CSS is a key tool to control the line breaking behavior of sub-elements in elastic containers. If you find that the items are crowded together and have no line breaks, or suddenly breaks when they are not needed, it may be that flex-wrap setting is wrong.

What is flex-wrap?

By default, all items in the flex container are placed on one line, and the content will be compressed even if there is not enough space. This is the so-called "single-line" layout. But if we want the project to automatically wrap lines when there is insufficient space, we need to use flex-wrap attribute.

It has three commonly used values:

• nowrap : default value, all items are displayed in one line.
• wrap : Allows items to wrap when necessary, with directions from left to right and from top to bottom.
• wrap-reverse : Similar to wrap , but the direction of the line break is reversed, such as the first line is at the bottom.

The setup method is very simple, just add a CSS to the container:

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

How to get the project to wrap the line as expected?

Sometimes flex-wrap: wrap is set, but the project still does not wrap lines, which is usually because the width of the project is set too small or too large, or the container itself does not have a clear width limit.

Frequently Asked Questions and Solutions:

• Project width is too small : If the width of each project is too narrow, it may take many to fill a row, which looks like there is no line break. The minimum width can be set using min-width .
• Project width is too large : If the project width is too large and the container cannot accommodate one project, only one will be placed per line, and even a scroll bar will appear. Consider using percentage width or flex-grow to fit the container.
• Container width is not defined : If the parent container has no fixed width or has its size affected by other styles, it may also cause a line break exception.

For example:

 .item {
  min-width: 200px;
}

This way, even if the container width changes, it can ensure that each item accounts for at least 200px, preventing it from being too dense.

How to adjust the spacing after a line break?

After the project has a new line, the gap between up and down lines may occur. While gap is a direct and valid property, it is not well supported in some older browsers.

Recommended practices:

• Use margin to control the spacing between items, and pay attention to the vertical direction after line breaks.
• Or use row-gap and column-gap to set the spacing between rows and columns separately.

Example:

 .container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 16px;
  column-gap: 8px;
}

This allows you to more precisely control the arrangement effect after line breaks.

What is the practical use of wrap-reverse?

Although wrap-reverse is not as commonly used as wrap , it is useful in some special layout scenarios. For example, you want the last row of items to be aligned by the top, or implement a navigation bar arranged from bottom to top.

When using it, be careful that the direction of the spindle will also be affected, the line breaking order will change, and the order of item arrangement will also change.

Basically that's it. flex-wrap looks simple, but it is critical in actual layout. As long as you understand its behavior logic and combine it with settings such as width and spacing, you can flexibly control the line breaking method of the project and make the layout you want.

The above is the detailed content of Controlling flex item wrapping behavior with css flex-wrap. For more information, please follow other related articles on the PHP Chinese website!