2.flex-wrap
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
属性 |
含义 |
|
nowrap（默认值） |
不换行 |
|
wrap |
换行，第一行在上方 |
|
wrap-reverse |
换行，第一行在下方 |
1 .HolyGrail-nowrap { 2 display: -webkit-flex; /* Safari */ 3 display: flex; 4 width:250px; 5 height:100px; 6 background-color:yellow; 7 justify-content:space-between; 8 flex-wrap:nowrap; 9 } 10 .item1{ 11 flex-basis:60px; 12 } 13 .HolyGrail-wrap { 14 display: -webkit-flex; /* Safari */ 15 display: flex; 16 width:250px; 17 height:100px; 18 background-color:red; 19 justify-content:space-between; 20 flex-wrap:wrap; 21 } 22 .item2{ 23 flex-basis:60px; 24 } 25 .HolyGrail-wrap-reverse { 26 display: -webkit-flex; /* Safari */ 27 display: flex; 28 width:250px; 29 height:100px; 30 background-color:blue; 31 justify-content:space-between; 32 flex-wrap:wrap-reverse; 33 } 34 .item3{ 35 flex-basis:60px; 36 }
1 <!DOCTYPR> 2 <html> 3 <meta http-equiv="Content-Type" content="text/html charset=utf-8" /> 4 <header> 5 <link rel="stylesheet" href="flex.css" type="text/css" /> 6 </header> 7 <body> 8 <div class="HolyGrail-nowrap"> 9 <span class="item1">b</span> 10 <span class="item1">c</span> 11 <span class="item1">d</span> 12 <span class="item1">e</span> 13 <span class="item1">f</span> 14 </div> 15 <div class="HolyGrail-wrap"> 16 <span class="item2">b</span> 17 <span class="item2">c</span> 18 <span class="item2">d</span> 19 <span class="item2">e</span> 20 <span class="item2">f</span> 21 </div> 22 <div class="HolyGrail-wrap-reverse"> 23 <span class="item3">b</span> 24 <span class="item3">c</span> 25 <span class="item3">d</span> 26 <span class="item3">e</span> 27 <span class="item3">f</span> 28 </div> 29 </body> 30 </html>
3.flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。