display的flex屬性使用詳解
阿新 • • 發佈：2017-05-25
logs back gen 平分 -a flow ack 垂直居中 log
flex的兼容性在pc端還算闊以，但是在移動端，那就呵呵了。今天我們只是學習學習，忽略一些不重要的東西。
首先flex的使用需要有一個父容器，父容器中有幾個items.
父容器：container
屬性：
display:flex;/*flex塊級，inline-flex:行內快*/
justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:兩邊的向兩邊靠，中間等分；space-around:完美的平均分配*/
align-items:stretch;/*center:垂直居中、flex-start：至頂、flex-end:至底、space-between、space-around*/
flex-direction: row;/*column從上向下的排列，column-reverse、row:從左到右，row-reverse:從右向左*/
flex-wrap:wrap;/*wrap多行顯示（父容器不夠顯示的時候，從上到下）、nowrap(當容器不夠寬的時候，子元素會平分父容器的寬或者高)、wrap-reverse:從下向上*/
/*flex-flow是flex-direction、flex-wrap的縮寫*/
這裏給出一個簡單的demo:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<style>
.container{
width:600px;
height:400px;
border:1px solid #000;
display:flex;/*flex塊級，inline-flex:行內快*/
justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:兩邊的向兩邊靠，中間等分；space-around:完美的平均分配*/
align-items:stretch;/*center:垂直居中、flex-start,至頂，flex-end:至底*,space-between、space-around*/
flex-direction: row;/*column從上向下的排列，column-reverse,,,,row:從左到右，row-reverse:從右向左*/
flex-wrap:wrap;/*wrap多行顯示（父容器不夠顯示的時候，從上到下）、nowrap(當容器不夠寬的時候，子元素會平分父容器的寬或者高)、wrap-reverse:從下向上*/
/*flex-flow是flex-direction、flex-wrap的縮寫*/
}
.box{
width:200px;
height:100px;
border:1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<div class="box">這是中間的box1</div>
<div class="box">這是中間的box2</div>
</div>
</body>
</html>
子元素的屬性：
order：設置元素的順序
例如：我麽想要將本來第二個元素排在第一，將排在第一的元素設置為第二。
我們可以設置他們的order值。
.box1{order:1;}
.box2{order:0;}
<div class="container">
<div class="box box1">這是中間的box1</div>
<div class="box box2">這是中間的box2</div>
</div>
display的flex屬性使用詳解