在CSS3中，我们可以使用flex-wrap属性来定义弹性盒子内部“子元素”是单行显示还是多行显示。

语法：

flex-wrap: 取值;

说明：

flex-wrap属性常见取值有3个，如下表所示。

flex-wrap属性取值
属性值 说明
nowrap 单行显示（默认值）
wrap 多行显示，也就是换行显示
wrap-reverse 多行显示，但是却是反向

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /* 公用样式 */
        .wrapper1,.wrapper2,.wrapper3 
        {
            display: flex;
            color: white;
            font-size:24px;
            width:400px;
            height: 100px;
            line-height:50px;
            border:1px solid gray;
            text-align: center;
        }
        .wrapper1 div,.wrapper2 div,.wrapper3 div 
        {
            height: 50%;
            width: 50%;
        }
        .red {background: red;}
        .green {background: green;}
        .blue {background: blue;}
        /* 弹性盒子样式 */
        .wrapper1 {flex-wrap: nowrap;}
        .wrapper2 {flex-wrap: wrap;}
        .wrapper3 {flex-wrap: wrap-reverse;}
    </style>
</head>
<body>
    <h3>1、flex-wrap:nowrap（默认值）</h3>
    <div class="wrapper1">
        <div class="red">1</div>
        <div class="green">2</div>
        <div class="blue">3</div>
    </div>
    <h3>2、flex-wrap:wrap</h3>
    <div class="wrapper2">
        <div class="red">1</div>
        <div class="green">2</div>
        <div class="blue">3</div>
    </div>
    <h3>3、flex-wrap:wrap-reverse</h3>
    <div class="wrapper3">
        <div class="red">1</div>
        <div class="green">2</div>
        <div class="blue">3</div>
    </div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

在这个例子中，我们定义了弹性盒子中每一个子元素的宽度都是父元素的50%（即200px），此时所有子元素宽度之和（600px）大于父元素的宽度（400px）。

在id="wrapper1"的元素中，我们定义了flex-wrap:nowrap;，因此子元素会以单行的形式来显示。

在id="wrapper2"的元素中，我们定义了flex-wrap:wrap;，因此子元素会以多行的形式来显示。

在id="wrapper3"的元素中，我们定义了flex-wrap:wrap-reverse;，因此子元素也是以多行的形式来显示，不过它的方向是相反的。