1.flex -direction
属性 |
含义 |
|
row（默认值） |
主轴为水平方向，起点在左端。 |
|
row-reverse |
主轴为水平方向，起点在右边。 |
|
column |
主轴为垂直方向，起点在上沿。 |
|
column-reverse |
主轴为垂直方向，起点在下沿。 |
.HolyGrail-row {
display: -webkit-flex; /* Safari */
display: flex;
width:250px;
height:100px;
background-color:yellow;
justify-content:space-between;
flex-direction:row;
margin-bottom:50px;
}
.HolyGrail-row-reverse {
display: -webkit-flex; /* Safari */
display: flex;
width:250px;
height:100px;
background-color:blue;
justify-content:space-between;
flex-direction:row-reverse;
margin-bottom:50px;
}
.HolyGrail-column-reverse {
display: -webkit-flex; /* Safari */
display: flex;
width:250px;
height:100px;
background-color:red;
justify-content:space-between;
flex-direction:column-reverse;
margin-bottom:50px;
}
.HolyGrail-column {
display: -webkit-flex; /* Safari */
display: flex;
width:250px;
height:100px;
background-color:purple;
justify-content:space-between;
flex-direction:column;
margin-bottom:50px;
}
<!DOCTYPR>
<html>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<header>
<link rel="stylesheet" href="flex.css" type="text/css" />
</header>
<body>
<div class="HolyGrail-row">
<span class="item">b</span>
<span class="item">c</span>
<span class="item">d</span>
</div>
<div class="HolyGrail-row-reverse">
<span class="item">b</span>
<span class="item">c</span>
<span class="item">d</span>
</div>
<div class="HolyGrail-column">
<span class="item">b</span>
<span class="item">c</span>
<span class="item">d</span>
</div>
<div class="HolyGrail-column-reverse">
<span class="item">b</span>
<span class="item">c</span>
<span class="item">d</span>
</div>
</body>
</html>