flex佈局實戰

Weibozzz發表於2019-02-16
Flex

flex佈局實戰

容器的屬性,即設定在容器上

  • flex-direction: row | row-reverse | column | column-reverse;
  • flex-wrap:nowrap | wrap | wrap-reverse;
  • flex-flow 屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
  • justify-content:flex-start | flex-end | center | space-between | space-around;
  • align-items: flex-start | flex-end | center | baseline | stretch;
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch;

專案的屬性,即設定在容器的下一層級

  • order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
  • flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
  • flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
  • flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間預設值為auto，即專案的本來大小。
  • flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選
  • align-self: auto | flex-start | flex-end | center | baseline | stretch;

flex佈局常用實戰

1.水平垂直居中

父級設定

justify-content: center;//水平
align-items: center;//垂直

2.容器等分

父級設定

 display: flex;

子級設定

 flex-grow: 1;
 /*flex:1;*/

3.底部固定

先設定body,html高度100%

html,body{
    height:100%;
    min-height:100%;
}

父級

display:flex;
flex-direction:column;//定義豎直方向
justify-content:space-between;//定義固定在兩邊

只設定中間容器，即主體，其他預設為0

    flex-grow:1;//佔滿剩餘部分

4.felx左邊固定，右邊佔滿

給固定元素設定這個，若設定固定寬度，則會擠掉固定寬度

    flex:0 0 100px;

相關文章