Flexbox Flex Wrap

Flexbox is a layout model in CSS that provides an efficient and flexible way to align and distribute space among items within a container. Flexbox Flex Wrap is a property in Flexbox that controls how items are arranged within a container when they exceed the container's width.

Flexbox

Flexbox follows a one-dimensional layout model, which means it arranges items along a single axis—either horizontally or vertically. The flex container holds the flex items and controls their layout.

The properties that control how items are arranged within a flex container are the flex-direction, justify-content, align-items, and align-self.

• flex-direction: This property determines the main axis of the flex container and the direction the items are arranged. The possible values are row, row-reverse, column, and column-reverse.

• justify-content: This property controls how the items are distributed along the main axis. The possible values are flex-start, flex-end, center, space-between, space-around, and space-evenly.

• align-items: This property controls how the items are aligned along the cross axis. The possible values are stretch, flex-start, flex-end, center, and baseline.

• align-self: This property controls how an individual item is aligned within the flex container. It overrides the align-items property for that particular item.

Flex Wrap

Flex Wrap is a Flexbox property that controls how the flex items are arranged when they exceed the container's width. The possible values are nowrap, wrap, and wrap-reverse.

• nowrap: This is the default value, and it means that the items are forced to fit within the container's width. If they exceed the container's width, they will overflow outside of the container.

• wrap: This value means that the items are allowed to wrap to the next line if they exceed the container's width.

• wrap-reverse: This value is similar to wrap, but the items are wrapped in reverse order. The first item becomes the last item, and vice versa.

Code Example

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

In the above example, the flex-container has a display property of flex, which sets the container as a flex container. The flex-wrap property is set to wrap, which allows the flex items to wrap to the next line if they exceed the container's width.

The justify-content property is set to center, which centers the flex items along the main axis. The align-items property is set to center, which centers the flex items along the cross axis.

Conclusion

Flexbox Flex Wrap is a powerful layout model that provides developers with a lot of options to arrange items within a container. By using the flex-wrap property, you can control how the items are arranged when they exceed the container's width.