flex佈局總結

flex佈局總結

 

 

flex 佈局

類型

  •  display: flex;(本文章爲此爲主)
  •  display;inline-flex;

 

屬性

  • 父節點 容器flex-container
  • 子節點 flex-item

 

父節點容器

  1. flex-direction          主軸方向(通常水平方向)
  2. flex-warp                 處理一行排列不足的問題
  3. flex-flow                  1和2的簡寫(flex-flow: row nowrap)
  4. justify-content        主軸(水平方向)對齊方式
  5. align-items              與主軸的交叉軸(豎方向)對齊方式
  6. align-content          多行在交叉軸軸上的對齊方式

 

子節點項目

  1. order                            值是整數,默認爲0,整數越小,item排列越靠前
  2. flex-grow                      是其餘item的放大倍數
  3. flex-shrink                    但空間不足,按照比例被消化, 需在父節點容器中設置flex-basis寬度
  4. flex-basis                      規定item項目的寬度
  5. flex                               是flex-grow flex-shrink flex-basis的總和
  6. align-self                      容許item本身在交叉軸(豎方向)有對齊方式

 

父節點容器

 

  1. flex-direction          主軸方向(通常水平方向)
  2. flex-warp                 處理一行排列不足的問題
  3. flex-flow                  1和2的簡寫(flex-flow: row nowrap)
  4. justify-content        主軸(水平方向)對齊方式
  5. align-items              與主軸的交叉軸(豎方向)對齊方式
  6. align-content          多行在交叉軸軸上的對齊方式

 

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

 

 

 

 

flex-direction 

決定主軸(通常是x軸)的方向,即項目排列的方向,有四個可能的值:row(默認)| row-reverse | column | column-reverse 佈局

 

  • row: 主軸爲水平方向,項目沿主軸從左至右排列
  • column:主軸爲豎直方向,項目沿主軸從上至下排列
  • row-reverse:主軸水平,項目從右至左排列,與row反向
  • column-reverse:主軸豎直,項目從下至上排列,與column反向

 

.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
}

 

 

  

 

 

  

 

 

 

flex-wrap

默認狀況下,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-flow

是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則按照實際寬度排列,不足則到上行

 

 

 

 

 

 

justify-content

很是重要,決定item在主軸上的對齊方式,可能的值有flex-start(默認),flex-end,center,space-between,space-around。

 

當主軸沿水平方向時,具體含義爲

  • 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;
}

 

     

 

 

 

        

         

 

align-items

決定了item在交叉軸上(Y軸)的對齊方式,可能的值有flex-start | flex-end | center | baseline | stretch

 

當主軸水平(Y軸)時,其具體含義爲:

 

  • flex-start:頂端對齊
  • flex-end:底部對齊
  • center:豎直方向上居中對齊
  • baseline:item第一行文字的底部對齊
  • stretch:當item未設置高度時,item將和容器等高對齊

 

備註:父節點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;
}

 

   

       

        

 

                

                 

 

 

align-content

該屬性定義了當有多根主軸時,即item不止一行時,多行在交叉軸軸上的對齊方式。注意當有多行時,定義了align-content後,align-items屬性將失效。

 

align-content可能值含義以下(假設主軸爲水平方向):

 

  • flex-start:左對齊
  • flex-end:右對齊
  • center:居中對齊
  • space- between:兩端對齊
  • space-around:沿軸線均勻分佈
  • stretch:各行將根據其flex-grow值伸展以充分佔據剩餘空間

 

備註:一、設置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共有以下六種屬性

 

  1. order                            值是整數,默認爲0,整數越小,item排列越靠前
  2. flex-grow                      是其餘item的放大倍數
  3. flex-shrink                    但空間不足,按照比例被消化, 需在父節點容器中設置flex-basis寬度
  4. flex-basis                      規定item項目的寬度
  5. flex                               是flex-grow flex-shrink flex-basis的總和
  6. align-self                      容許item本身在交叉軸(豎方向)有對齊方式

 

 

order

order的值是整數,默認爲0,整數越小,item排列越靠前

 

 

.flex-container{
  flex-flow: wrap;
}
.flex-items{
  order:1;
}

 

 

flex-grow

定義了當flex容器有多餘空間時,item是否放大。默認值爲0,即當有多餘空間時也不放大;可能的值爲整數,表示不一樣item的放大比例

 

備註:item項目未規定寬度,則分配一行寬度,即便規定了寬度也分配多餘空間

 

.flex-item{
  flex-grow: 1;
}
/* 1 */
.flex-contanier{
  flex-wrap: wrap;
}
/* 2 */
.flex-contanier{
  flex-wrap: nowrap;
}

 

 

   

 

 

flex-shrink

 

定義了當容器空間不足時,item是否縮小。默認值爲1,表示當空間不足時,item自動縮小,其可能的值爲整數,表示不一樣item的縮小比例。

 

備註:這個比較懵逼,待解析

 

flex-basis

表示項目在主軸上佔據的空間,默認值爲auto。

 

.red{
  flex-basis: 100px;
}
.green {
  flex-basis: 100px;
}

 

 

 

flex

flex屬性是flex-grow、flex-shrink和flex-basis三屬性的簡寫總和

 

具體查看以上三個

 

 

align-self

align-self屬性容許item有本身獨特的在交叉軸上的對齊方式,它有六個可能的值,默認值爲auto

 

  • auto:和父元素align-self的值一致
  • flex-start:頂端對齊
  • flex-end:底部對齊
  • center:豎直方向上居中對齊
  • baseline:item第一行文字的底部對齊
  • stretch:當item未設置高度時,item將和容器等高對齊

 

備註:與父節點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

相關文章
相關標籤/搜索