To make the items in the Flexbox layout automatically wrap, you need to set flex-wrap: wrap; 1. Use the flex-wrap attribute to control whether to wrap the line. Common values ??include nowrap (not wrapping), wrap (down wrapping) and wrap-reverse (up wrapping); 2. Combining the flex-direction attribute can change the direction of the spindle, affecting the arrangement order and line breaking position, such as row (default from left to right), row-reverse (from right to left), column (from top to bottom), etc.; 3. It is recommended to use the gap attribute to set the project spacing uniformly after wrapping, to improve the neatness of the layout, but attention should be paid to browser compatibility. Master these techniques to easily achieve responsive layouts.

When using Flexbox for layout, sometimes there are too many items and one line that cannot be put down, so you need to make them wrap automatically. Flexbox itself supports automatic line wrapping, and you only need to set a property to do it.

flex-wrap controls whether to wrap lines

By default, items in Flexbox containers are forced to squeeze into a line, and even if the container width is exceeded, they will not be wrapped. To make them wrap automatically, add flex-wrap: wrap; to the container.

This property has several optional values:

• nowrap (default): No line wrapping
• wrap : automatic wrapping, new line is below
• wrap-reverse : Automatic wrapping, but new line is above

For example, if you want to make a responsive card layout, you can write it like this:

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

In this way, when there is not enough space, the project will automatically fall off and will not break the container.

Control the direction of the spindle affects the order of line breaking

In addition to whether to wrap the line, you can also control the direction of the spindle through flex-direction , which will affect the order of the items and the position of the line break.

Common values ??are:

• row (default): arrange from left to right, line break down
• row-reverse : Arrange from right to left, line break down
• column : Arrange from top to bottom, line break to right
• column-reverse : Arrange from bottom to top, line break to right

For example, if you want the project to be lined from right to left and continue to align to the right after a new line, you can use it in combination like this:

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

This will be useful when doing RTL (right to left language) web page layout.

Don't ignore the spacing issue after line breaks

Although the line breaking function is simple, many people ignore the spacing problem between projects. Especially when you use flex-wrap: wrap; you may find that the last or first line looks out of alignment or the gap is too large.

At this time, you can consider using gap attribute to set the spacing between projects uniformly:

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

This not only has gaps in the horizontal direction, but also in the vertical direction. It is much more convenient and cleaner than using margin alone.

However, it should be noted that gap may need to be prefixed in older browsers, or it may not be supported. If you need better compatibility, you can use margin with negative margins to achieve similar effects.

Basically that's it. The line wrap function of Flexbox is very practical. The key is to understand the combination of flex-wrap and flex-direction , and with the appropriate spacing processing, you can easily make various responsive layouts.

The above is the detailed content of Implementing CSS Flexbox item wrapping. For more information, please follow other related articles on the PHP Chinese website!