flex-wrap 属性

　　

　　flex-wrap 属性用于指定弹性盒子的子元素换行方式。

　　

　　语法

　　

　　flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

　　

　　各个值解析:

　　

　　nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。

　　

　　wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行

　　

　　wrap-reverse -反转 wrap 排列。

　　

　　以下实例演示了 nowrap 的使用:

　　

　　实例

　　

　　.flex-container {

　　

　　display: -webkit-flex;

　　

　　display: flex;

　　

　　-webkit-flex-wrap: nowrap;

　　

　　flex-wrap: nowrap;

　　

　　width: 300px;

　　

　　height: 250px;

　　

　　background-color: lightgrey;

　　

　　}

　　

　　以下实例演示了 wrap 的使用:

　　

　　实例

　　

　　.flex-container {

　　

　　display: -webkit-flex;

　　

　　display: flex;

　　

　　-webkit-flex-wrap: wrap;

　　

　　flex-wrap: wrap;

　　

　　width: 300px;

　　

　　height: 250px;

　　

　　background-color: lightgrey;

　　

　　}

　　

　　以下实例演示了 wrap-reverse 的使用:

　　

　　实例

　　

　　.flex-container {

　　

　　display: -webkit-flex;

　　

　　display: flex;

　　

　　-webkit-flex-wrap: wrap-reverse;

　　

　　flex-wrap: wrap-reverse;

　　

　　width: 300px;

　　

　　height: 250px;

　　

　　background-color: lightgrey;

　　

　　}