In this section, the target

  1. Learn the use of flex-wrap, which is used to set the project newline properties.

Content in this paper,

This article explained the container property flex-wrap, which sets whether or not items in the container are wrapped, and demonstrated the corresponding values.

Read for 5 to 10 minutes.

The flex – wrap

The flex-wrap property is used to set whether items in the container are wrapped automatically. The syntax is as follows:

.container {
	flex-wrap: nowrap | wrap | wrap-reverse
}
Copy the code

Among them:

1. Nowrap projects do not wrap lines (this is the default). 2. The wrap project does a line break when the container is exceeded. 3. Wrap-reverse specifies the same value as wrap, but in reverse order.Copy the code

As shown below:

Remember the flew base attribute you learned earlier? This property is used to set the amount of space that the project occupies on the main axis, and if it exceeds the amount, it shrinks according to the flex-shrink set factor.

If we set flex-wrap to wrap, the project will not shrink and will wrap itself.

Example 1, a div (container, 450px) with five divs (items, flex-basis, 120px) in the container.

Set flex-wrap to wrap:

.container {
	/* Set the layout of the child elements to flex layout */
	display: flex;
	/* Sets the item to wrap */
	flex-wrap: wrap; 
}

.item {
	flex-basis: 120px;
}
Copy the code

Operation effect:

You can see that each item is 120px, and instead of zooming out, this time it wraps.

Think about:

The last example had 5 items. What if there were 7 items?Copy the code

Answer:

Since each row can only fit three items, the seven items will be arranged in three rows and the height of the items will be reduced.Copy the code

As shown below:

Example 2, follow up and set flex-wrap to wrap-reverse.

Set flex-wrap to wrap-reverse on the container as follows:

.container {
	/* Set the layout of the child elements to flex layout */
	display: flex;
	/* Sets the item to wrap */
	flex-wrap: wrap-reverse; 
}

.item {
	flex-basis: 120px;
}
Copy the code

Operation effect:

I’ve got a line break here, but I’m starting at the bottom, so that’s what I mean by reverse order.

This section summarizes

  1. Flex-wrap is used to set the line wrap property of the project. The default is no line wrap.
  2. The flex-wrap attribute has a higher priority than Flex-shrink.