Flexbox - Flex-Wrap

Flexbox Flex-Wrap - 从简单和简单的步骤学习Flexbox，从基本到高级概念，包括概述，Flex容器，Flex-Direction，Flex-Wrap，对齐内容，对齐项目，对齐内容，Flex-Order，灵活性，对齐自。

通常，如果容器的空间不足，其余的flex项将被隐藏，如下所示.

Flex No Wrap Hide

flex-wrap 属性用于指定flex-container是单行还是多行的控件.

用法 :

flex-wrap: nowrap | wrap | wrap-reverseflex-direction: column | column-reverse

此属性接受以下值 :

现在，我们将看到如何使用 wrap 属性和示例.

wrap

传递值换行到属性 flex-wrap ，容器的元素从左到右水平排列，如下所示.

Wrap

以下示例演示了将值 wrap 传递给

One

two

three four five six

它将产生以下结果 :

在将值wrap-reverse传递给属性flex-wrap时，容器的元素从左到右水平排列，如下所示。

Wrap Reverse

以下示例演示将值wrap-reverse传递给flex-wrap属性的结果。在这里，我们使用flex-direction值行创建六个具有不同颜色的框。

                     One         two         three         four         five         six

在将值包装传递给属性flex-wrap并将值列传递给属性flex-direction时，容器的元素从左到右水平排列，如下所示。

Wrap Column

以下示例演示将值包装传递给flex-wrap属性的结果。在这里，我们使用flex-direction value列创建六个具有不同颜色的框。

                        One         two         three         four         five         six

在将值wrap-reverse传递给属性flex-wrap并将value列传递给属性flex-direction时，容器的元素从左到右水平排列，如下所示。

Wrap Reverse Column

以下示例演示将值wrap-reverse传递给flex-wrap属性的结果。在这里，我们创建了六个具有不同颜色的框和带有flex-direction值列的框。

                        One         two         three         four         five         six