html案例代碼:css
<div class="flex-container"> <div class="flex-item red"> 1 </div> <div class="flex-item green"> 2 </div> <div class="flex-item yellow"> 3 </div> <div class="flex-item black"> 4 </div> </div>
css案例代碼:html
html,body{ background: #f7f7f7; } .flex-container{ display: flex color: #fff; } .flex-item{ width: 150px; height: 100px; } .red{ background: red; } .green{ background: green; } .yellow{ background: yellow; } .black{ background: black; }
頁面以下:css3
決定主軸(通常是x軸)的方向,即項目排列的方向,有四個可能的值:row(默認)| row-reverse | column | column-reverse 佈局
.flex-container{ display: flex; height: 100px; flex-direction: row; /* 1 */ flex-direction: column; /* 2*/ flex-direction: row-reverse; /* 3*/ flex-direction: column-reverse;/* 4*/ color: #fff; } .flex-item{ flex: 1 }
默認狀況下,item排列在一條線上,即主軸上,flex-wrap決定當排列不下時是否換行以及換行的方式,可能的值nowrap(默認) | wrap | wrap-reverseflex
nowrap:自動縮小項目,不換行spa
wrap:換行,且第一行在上方ssr
wrap-reverse:換行,第一行在下面3d
.flex-container{ display: flex; color: #fff; flex-wrap: nowrap; /* 1 */ flex-wrap: wrap; /* 2 */ flex-wrap: wrap-reverse; /* 3 */ } .flex-item{ width: 150px; height: 100px; } .red{ width: 300px; }
備註: flex-item寬度定義分別是300px 150px 150px 150px; 因此按照比例2:1:1:1來分割父節點寬度,實際寬度爲 150px 75px 75px 75px (合計375px)htm
是flex-direction和flex-wrap的簡寫形式,如:row wrap | column wrap-reverse等。默認值爲row nowrap,即橫向排列 不換行。blog
.flex-container{ flex-flow: row nowrap; }
組合:
flex-flow |
nowrap |
wrap |
wrap-reverse |
row |
一、row nowrap |
五、row wrap |
九、row wrap-reverse |
column |
二、column nowrap |
六、column wrap |
十、column wrap-reverse |
row-reverse |
三、row-reverse nowrap |
七、row-reverse wrap |
十一、row-reverse wrap-reverse |
column-reverse |
四、column-reverse nowrap |
八、column-reverse wrap |
十二、column-reverse wrap-reverse |
第一種:當flex-wrap設置爲nowrap時,屬性(寬度比例,非px實際寬度)按照flex-direction來排列
第二種: 當flex-wrap設置爲wrap時,item則按照實際寬度排列,不足則到下行
第三種:當flex-wrap設置爲wrap-reverse時, item則按照實際寬度排列,不足則到上行
很是重要,決定item在主軸上的對齊方式,可能的值有flex-start(默認),flex-end,center,space-between,space-around。
當主軸沿水平方向時,具體含義爲
備註: 當項目item不滿父節點item-container時,flex-start, flex-end不起到做用
.flex-container{ justify-content: flex-start; /* 1 */ justify-content: flex-end; /* 2 */ justify-content: center; /* 3 */ justify-content: space-between; /* 4 */ justify-content: space-around; /* 5 */ } .flex-item{ width: 50px; height:50px; }
決定了item在交叉軸上(Y軸)的對齊方式,可能的值有flex-start | flex-end | center | baseline | stretch
當主軸水平(Y軸)時,其具體含義爲:
備註:父節點flex-container與子節點flex-item存在高度差,才能起到做用
.flex-container{ height: 200px; align-items: flex-start; /* 1 */ align-items: flex-end; /* 2 */ align-items: center; /* 3 */ align-items: baseline; /* 4 */ align-items: stretch; /* 5 */ } .flex-item{ height: 100px; } .red,.green{ font-size: 14px; }
該屬性定義了當有多根主軸時,即item不止一行時,多行在交叉軸軸上的對齊方式。注意當有多行時,定義了align-content後,align-items屬性將失效。
align-content可能值含義以下(假設主軸爲水平方向):
備註:一、設置flex-wrap:wrap,否則默認nowrap按照比例排滿一行。
二、父節點flex-container與子節點flex-item存在高度差,才能起到做用
.flex-container{ flex-wrap: wrap; height:300px; background: #969799; align-content: flex-start; /* 1 */ align-content: flex-end; /* 2 */ align-content: center; /* 3 */ align-content: space-between; /* 4 */ align-content: space-between; /* 5 */ align-content: stretch; /* 6 */ }
item的屬性在item的style中設置。item共有以下六種屬性
order的值是整數,默認爲0,整數越小,item排列越靠前
.flex-container{ flex-flow: wrap; } .flex-items{ order:1; }
定義了當flex容器有多餘空間時,item是否放大。默認值爲0,即當有多餘空間時也不放大;可能的值爲整數,表示不一樣item的放大比例
備註:item項目未規定寬度,則分配一行寬度,即便規定了寬度也分配多餘空間
.flex-item{ flex-grow: 1; } /* 1 */ .flex-contanier{ flex-wrap: wrap; } /* 2 */ .flex-contanier{ flex-wrap: nowrap; }
定義了當容器空間不足時,item是否縮小。默認值爲1,表示當空間不足時,item自動縮小,其可能的值爲整數,表示不一樣item的縮小比例。
備註:這個比較懵逼,待解析
表示項目在主軸上佔據的空間,默認值爲auto。
.red{ flex-basis: 100px; } .green { flex-basis: 100px; }
flex屬性是flex-grow、flex-shrink和flex-basis三屬性的簡寫總和
具體查看以上三個
align-self屬性容許item有本身獨特的在交叉軸上的對齊方式,它有六個可能的值,默認值爲auto
備註:與父節點flex-container中的align-item, align-content同個意思,不一樣的是align設置的是單個的,而align-items設置的
.green{ align-self: auto; align-self: flex-start; align-self: flex-end; align-self: center; align-self: baseline; align-self: stretch; }
備註:align-self: baseline; align-self: stretch; 與1 2同樣在此不作多介紹,能夠參考align-items