首页 > 代码库 > Flex 基础语法(二)

Flex 基础语法(二)

1.flex -direction

属性

含义

row(默认值)

主轴为水平方向,起点在左端。

row-reverse

主轴为水平方向,起点在右边。

column

主轴为垂直方向,起点在上沿。

column-reverse

主轴为垂直方向,起点在下沿。

 

 

 

 

 

 

 

 

代码如下: 

技术分享
 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">
 9 <span class="item">b</span>
10 <span class="item">c</span>
11 <span class="item">d</span>
12 </div>
13 </body>
14 </html>
View Code
技术分享
1 .HolyGrail {
2     display: -webkit-flex; /* Safari */
3     display: flex;
4     width:250px;
5     height:100px;
6     background-color:yellow;
7     justify-content:space-between;
8 }
View Code

 

Flex 基础语法(二)