使用css3布局屬性flex詳細介紹

來源：懂視網責編：小采時間：2020-11-27 18:52:30

使用css3布局屬性flex詳細介紹

使用css3布局屬性flex詳細介紹:這篇文章講述使用css3布局屬性flex詳細介紹html代碼如下:<ul class="ul_box"> <li><a href="#">html</a></li> <li><a href="#">

推薦度：

導讀使用css3布局屬性flex詳細介紹:這篇文章講述使用css3布局屬性flex詳細介紹html代碼如下:<ul class="ul_box"> <li><a href="#">html</a></li> <li><a href="#">

這篇文章講述使用css3布局屬性flex詳細介紹

html代碼如下:

<ul class="ul_box">
 <li><a href="#">html</a></li>
 <li><a href="#">css</a></li>
 <li><a href="#">javascript</a></li>
 <li><a href="#">html5</a></li>
 <li><a href="#">css3</a></li>
 <li><a href="#">jquery</a></li></ul>

css代碼如下:

.ul_box{
 margin:0;
 padding: 0;
 list-style: none; /*display: flex將對象作為彈性伸縮盒顯示;
 flex-flow:flex-direction(確定彈性子元素排列方式)和
 flex-wrap(當彈性子元素超出彈性元素容器范圍時是否換行)的復合屬性,
 寫入父容器里; */
 display: flex;
 flex-flow: row wrap;
}.ul_box li{
 text-align: center;
 height:40px;
 line-height: 40px; /*flex:flex-grow(設置彈性子元素的擴展比率)
 * flex-shrink(設置彈性子元素的收縮比率)
 * flex-basis(指定彈性子元素伸縮前的默認大小值，相當于width和height屬性。)
 * 這三種屬性的復合屬性，寫入子容器里;*/
 flex: 1 1 100%;
}.ul_box li a{
 text-decoration: none;
 color:#fff;
}.ul_box li:nth-child(1){
 background: #008000;
}.ul_box li:nth-child(2){
 background: #4169E1;
}.ul_box li:nth-child(3){
 background: #8A2BE2;
}.ul_box li:nth-child(4){
 background: #A52A2A;
}.ul_box li:nth-child(5){
 background: #FFA500;
}.ul_box li:nth-child(6){
 background:#9ACD32;
}@media (min-width:480px ) {
 .ul_box li{
 flex: 1 1 50%;
 }}
@media (min-width:768px ) {
 .ul_box{
 flex-flow: row nowrap;
 }}

以下6個屬性設置在容器上：

flex-direction　　容器內項目的排列方向(默認橫向排列)　　

flex-wrap　　容器內項目換行方式

flex-flow　　以上兩個屬性的簡寫方式

justify-content　　項目在主軸上的對齊方式

align-items　　項目在交叉軸上如何對齊

align-content　　定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

容器中項目的屬性：

order　　項目的排列順序。數值越小，排列越靠前，默認為0。

flex-grow　　項目的放大比例，默認為0，即如果存在剩余空間，也不放大。

flex-shrink　　項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

flex-basis　　在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。