display的flex屬性使用詳解

風靈使發表於2018-05-21
Flex

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>　　

flex:指定可伸縮長度的部件，是flex-shrink,flex-grow,flex-basis這三個屬性的縮寫。

他可以指定一個子元素的佔據父元素的寬度或者高度的比例。（前提是在子元素還沒有佔滿父級元素的情況下）

demo:

<style>
   .container{
       width:800px;
       height:600px;
       border:1px solid red;
       display:flex;
       align-items:center;
       justify-content:center;
       flex-direction:row;
       flex-wrap:wrap;
   }
   .box{
       width:200px;
       height:200px;
       border:1px solid blue;
   }
　　　.box1{
   　　flex:2
   }
 </style>
</head>
<body>
   <div class="container">
       <div class= " box box1">1</div>
       <div class="box box2">2</div>
       <div class="box box3">3</div>
       <div class="box box4">4</div>
   </div>
</body>　

最終效果如下：因為子元素佔滿父級元素。
這裡寫圖片描述

進一步驗證：

<style>
    .container{
        width:800px;
        height:600px;
        border:1px solid red;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:row;
        flex-wrap:wrap;
    }
    .box{
        width:200px;
        height:200px;
        border:1px solid blue;
    }
　　　　.box1{
    　　flex:2
    }
  </style>
 </head>
 <body>
    <div class="container">
        <div class= " box box1">1</div>
        <div class="box box2">2</div>
    </div>
 </body>　

很明顯的闊以看到，box1佔據了600px寬度
這裡寫圖片描述
align-self:用來單獨設定子元素的對齊方式（可將預設的對齊方式進行覆蓋）

例如:我們已經在父元素中設定了align-items:center.(將子元素設定為垂直居中顯示)

這個時候我們想單獨更改某個子元素的對齊方式，就可以使用align-self

<style>
    .container{
        width:800px;
        height:600px;
        border:1px solid red;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:row;
        flex-wrap:wrap;
    }
    .box{
        width:100px;
        height:100px;
        border:1px solid blue;
    }
　　　　.box1{
    　　flex:2
    }
/* .box4{
        align-self:flex-end;
    } */
  </style>
 </head>
 <body>
    <div class="container">
        <div class= " box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
    </div>
 </body>

這裡寫圖片描述

假如我們設定 box4：align-self:flex-end;呢？？？？？

.box4{
　align-self:flex-end;
 }

這裡寫圖片描述
好了，已經改變了box4的對齊方式。

如果想相容更多的瀏覽器，可以採用優雅降級的方式，例如sass-flex-mixin

相關文章