Flex 基础语法（三）

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 }

View Code

 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>

View Code

3.flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

posted on 2017-03-15 15:07 IT-HourseMan 阅读(192) 评论(0) 编辑收藏举报

Flex 基础语法（三）

属性

含义