Flex佈局 學習（一）

2009年，W3C 提出了一種新的方案----Flex 佈局，能夠簡便、完整、響應式地實現各類頁面佈局。時至今日，它已得到了全部瀏覽器的支持，這讓flex佈局成爲將來佈局的首選。

1、那何爲Flex？

其實Flex是Flexible Box的縮寫，意爲」彈性盒子」，用來爲盒狀模型提供最大的靈活性。

任何一個容器（父元素）均可以指定Flex佈局，只須要設置：

/*塊內元素*/
display：flex;
/*行內元素*/
display:inline-flex;

另外：webkit內核的瀏覽器，要加上-webkit前綴。

display:-webkit-flex;
display:flex;

注意：設爲flex佈局以後，子元素的float、clear、和vertical-align屬性將失效

附上主流瀏覽器前綴

-ms-transform:rotate(7deg);      //  -ms-表明IE瀏覽器識別前綴
-moz-transform:rotate(7deg);      //  -moz-表明火狐瀏覽器識別前綴
-webkit-transform:rotate(7deg);    //  -webkit-表明谷歌和Safari瀏覽器識別前綴
-o-transform:rotate(7deg);          //  -o- 表明Opera瀏覽器識別前綴

transform;rotate(7deg)           // 統一標識語句，符合w3c標準

2、基本概念

採用Flex佈局的元素，稱爲Flex容器，簡稱「容器」。它的全部子元素自動成爲容器成員，成爲flex項目，簡稱「項目」。

 

 

 關於這圖我就不仔細說了，能夠去http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html看阮一峯老師的詳解。

我的粗解，容器有兩個軸，我名爲X軸（水平方向），從左到右，左邊爲起點；Y軸（垂直方向）,從上到下，最上爲起點。

3、容器屬性：

容器共有六個屬性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

下面一一給你們展現效果，

在演示以前，先弄幾個子元素盒子和父元素容器

css部分——子元素小盒子

            .first{
                width: 100px;
                height: 100px;
                background-color: pink;
            }
            .second{
                width: 100px;
                height: 120px;
                background-color: gold;
            }
            .third{
                width: 120px;
                height: 140px;
                background-color: purple;
            }
            .fourth{
                width: 100px;
                height: 100px;
                background-color: cadetblue;
            }
            .fifth{
                width: 100px;
                height: 100px;
                background-color: greenyellow;
            }
            .sixth{
                width: 150px;
                height: 100px;
                background-color: deepskyblue;
            }

css部分——父元素大盒子——box1

       #box1{
                margin: 20px 300px;
                width: 500px;
                height: 300px;
                border: 1px solid red;
                box-sizing: border-box;
                display: flex;
                /*默認值:從左到右水平排序*/
                flex-direction: row;
                /*從右到左逆向排序*/
                /*flex-direction: row-reverse;*/
                /*從上到下順序排序*/
                /*flex-direction: column;*/
                /*從下到上逆向排序*/
                /*flex-direction: column-reverse;*/       
            }

 

HTML部分

<div id="box1">
            <div class="first">1</div>
            <div class="second">2</div>
            <div class="third">3</div>
            <div class="fourth">4</div>
            <div class="fifth">5</div>
            <div class="sixth">6</div>
</div>

3.1 flex-direction屬性，它決定主軸的方向（即項目的排列方向）。

效果：

  

 

 3.2 flex-wrap 屬性，若在同一軸上且子元素排不下的狀況下，是否決定換行

HTML部分

<div id="box2">
            <div class="first">1</div>
            <div class="second">2</div>
            <div class="third">3</div>
            <div class="fourth">4</div>
            <div class="fifth">5</div>
            <div class="sixth">6</div>
</div>

css部分——父元素大盒子——box2

            #box2{
                margin: 20px 300px;
                width: 500px;
                height: 300px;
                border: 1px solid red;
                box-sizing: border-box;
                display: flex;
                
           
                /*默認,不換行*/
               　flex-wrap: nowrap;
                
                /*換行,第一行在上*/
                /*flex-wrap: wrap;*/
                /*換行,第一行在下*/
                /*flex-wrap: wrap-reverse;*/
                
                
            }

 效果以下：

  

 

 3.3 flex-flow屬性是flex-direction 屬性和flex-wrap屬性的簡寫形式，因此下面就很少介紹了。

主要寫法 就是

/*格式*/
flex-flow:flex-direction flex-wrap
/*舉例*/
flex-flow:column wrap;

3.4 jusify-content屬性定義了項目在主軸上的對齊方式。

HTML部分

<div id="box3">
            <div class="first">1</div>
            <div class="second">2</div>
            <div class="third">3</div>
            <div class="fourth">4</div>
 </div>

CSS部分——父級大盒子——box3

#box3{
                margin: 20px 300px;
                width: 500px;
                height: 300px;
                border: 1px solid blueviolet;
                box-sizing: border-box;
                display: flex;
                flex-flow:row  nowrap;
                /*（默認值）：左對齊*/
                /*justify-content: flex-start;*/
                /* 右對齊*/
                justify-content: flex-end;
                /*居中對齊*/
                /*justify-content: center;*/
                  /*  兩端對齊*/
                /*justify-content: space-around;*/
              /* 每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。*/
                /*justify-content: space-between;*/
                
            }

效果以下：以子元素都在水平軸不換行爲例

 

 

 

  

 

 

 

 注：justify-content:space-between和justify-content:space-around是有區別的，前者最左和最有靠邊框，後者最左和最右離邊框還有距離

 3.5align-items屬性定義項目（子元素）在交叉軸（y軸）上如何對齊。

HTML部分

        <div id="box4">
            <div class="first">1
            </div>
            <div class="second">2
            </div>
            <div class="third">3</div>
            <div class="fourth">4</div>
        </div>

 

css部分——父級大盒子——box4

 

#box4{
                margin: 20px 300px;
                width: 500px;
                height: 300px;
                border: 1px solid blueviolet;
                box-sizing: border-box;
                display: flex;
                flex-flow:row nowrap;
                /*交叉軸的終點對齊。*/
                align-items: flex-end;
                /*交叉軸的起點對齊。*/
                /*align-items: flex-start;*/
            /*    交叉軸的中點對齊*/
                /*align-items: center;*/
                /*項目的第一行文字的基線對齊。*/
                /*align-items: baseline;*/
                /*默認值,若是項目未設置高度或設爲auto，將佔滿整個容器的高度。*/
                /*align-items: stretch;*/
            }

效果以下：

   

 

 至於另外兩個就很差展現了，只好盜下圖

  

 

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

HTML部分：

<div id="box5">
            <div class="first">1</div>
            <div class="second">2</div>
            <div class="third">3</div>
            <div class="fourth">4</div>
            <div class="fifth">5</div>
            <div class="sixth">6</div>
            <div class="fourth">7</div>
            <div class="second">8</div>
 </div>

 

css部分：

            #box5{
                margin: 20px 300px;
                width: 500px;
                height: 300px;
                border: 1px solid blueviolet;
                box-sizing: border-box;
                display: flex;
                flex-flow:row wrap;
                /*    與交叉軸的起點對齊。*/
                align-content: flex-start;
                /*   與交叉軸的終點對齊。*/
                /*align-content:flex-end;*/
                /*與交叉軸的中點對齊。*/
                /*align-content:center;*/
                /*每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。*/
                /*align-content:space-around;*/
                /*與交叉軸兩端對齊，軸線之間的間隔平均分佈。*/
                /*align-content:space-between;*/
            }    

 

效果以下：

  

 

 

 

 

 

4、項目屬性

項目（子元素）屬性共有六個，他們分別是

4.1 order

4.2 flex-grow

4.3 flex-shrink

4.4 flex-basis

4.5 flex

4.6 align-self

下面一一簡單介紹下

4.1 order屬性

order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。

格式：

.item{
     order:<integer> ;/*輸入整數*/   
}

容許我盜下圖

 

 4.2 flex-grow屬性

flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。

 格式：

.item {
  flex-grow: <number>; /* default 0 */
}

效果

 

 若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。

4.3 flex-shrink

flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。

格式：

.item {
  flex-shrink: <number>; /* default 1 */
}

效果以下：

 

 4.4flex-basis

flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。

格式：

.item {
  flex-basis: <length> | auto; /* default auto */
}

它能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間。

4.5 flex

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

格式

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。

4.6 align-self

align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

格式：

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

 

參考文章：

阮一峯老師《Flex 佈局教程：語法篇》