flex 彈性佈局

時間 2019-11-16

標籤 flex 彈性佈局欄目 Flex 简体版

原文原文鏈接

案例基礎佈局

htmlcss

<ul class="box">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>

csshtml

.box{
            display: -webkit-flex;
            display: flex;
        }
        .item{
            width: 200px;
            height: 300px;
            background: red;
            border: 1px solid #ccc;
            font-size: 50px;
            text-align: center;
            line-height: 300px;
            color:#fff;
        }

由於flex主要方便與移動端佈局，因此測試以谷歌模擬移動端看效果：web

由於使用 flex 佈局，子元素默認是橫向排列，因此不須要float，也不起做用；

父盒子屬性探究

flex-direction

flex-direction 表示子元素的排列方向和順序；默認 row （橫排，左到右）； row-reverse 表示橫排右到左小程序

.box{
            display: -webkit-flex;
            display: flex;
            flex-direction:row-reverse;    
        }

若是每一個把每一個 li 設置爲 width：3000px;(當前屏幕寬度980px),效果：瀏覽器

子元素寬度超出，不但沒有換行，會自動適應大小，平分爲 25%；佈局

上面的平分只是在 row 的時候會平分，若是是換成豎向排列：測試

flex-direction: column;

元素不會被擠壓了，擁有3000px寬；可是要注意，它不是由於不夠空間而換行了，只是column 值規定了它豎向排列
下面的值能夠調整爲倒序豎向排列flex

flex-direction: column-reverse;  //表示元素豎直 反向排

flex-wrap

flex-wrap 默認 nowrap：不換行。上面的3000px 子元素正是由於這個豎向默認是不會換行的，因此上面設置3000px寬，不會換行；spa

一樣的代碼，若是加多一句3d

.box{
            display: -webkit-flex;
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap;    //換行，第一行在上方。
        }

能夠發現，設置爲能夠換行之後，子元素寬度變爲100%屏幕寬了；這就像一個彈性盒子塞到了比本身小的盒子中，彈性盒子自動收縮了本身的寬度。

若是這樣寫：

.box{
            display: -webkit-flex;
            display: flex;
            flex-direction: row-reverse;
            flex-wrap: wrap-reverse;    //換行，第一行在下方。
        }

flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

flex-flow：row wrap  ===  flex-direction:row; flex-wrap: wrap

代碼又改一下：

.box{
      display: -webkit-flex;
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: wrap-reverse;
    }
    
  能夠寫成

.box{
      display: -webkit-flex;
      display: flex;
      flex-flow:row-veverse wrap-reverse
    }

justify-content

它有五個值，其中若是把 item 比作word文檔的文字的話, flex-star 能夠看作是左對齊， flex-end：右對齊； flex-center：居中；

重點介紹值 space-around:平份內容空餘空間，每一個項目兩側的間隔相等;
設空餘空間爲 area，有子元素 k個，每一個子元素等於增長了多少margin？==> area/2k

本例子：

.item{
    width:200px;
}
.box{
       display: -webkit-flex;
       display: flex;
       justify-content: space-around;
}

值得注意的是，項目之間的間隔比項目與邊框的間隔大一倍。

space-between：兩端對齊，項目之間的間隔都相等。不給

align-items

align 字樣基本就知道它是針對垂直方向的了；

.box{
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            height: 1760px;
            align-items: center;

        }

記得給父加一個高度；這樣子能夠看出元素垂直居中了

其餘的類似的屬性就再也不一一寫了

flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

看 baseline屬性: 項目的第一行文字的基線對齊。

這個屬性比較新穎，能夠試試：

.box{
     align-items: baseline;
     }
     
    <ul class="box">
        <li class="item" style="height: 150px;line-height: 150px">1</li>
        <li class="item" style="height: 500px;line-height: 500px">2</li>
        <li class="item" style="height: 250px;line-height: 250px">3</li>
        <li class="item" style="height: 170px;line-height: 170px">4</li>
    </ul>

上面我給每一個item 都設置了不一樣的高度和 line-height;

能夠看到容器爲了讓文字對齊而調整本身的位置；

align-content

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

.box{
            height: 1760px;   //高度要撐開
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            flex-flow: row wrap; //橫排 換行；產生多軸

        }
        
        
<ul class="box">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

嘗試添加代碼

align-content: flex-end;

align-content:space-around;

align-content:space-between;

align-content : center;

能夠說，flex佈局在父元素上對子元素垂直方向的控制仍是很是到位和明確的；

子元素屬性探究

order

大概能夠理解爲子元素的排隊號碼，默認都是0，越大排隊越後；

<ul class="box">
        <li class="item" style="order:10">1</li>
        <li class="item" style="order:11">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

能夠看到，1 號由於 order 設置爲10排到了後面；而2號由於更加大的order 而排到最後。

flex-grow 多餘空間分配比例

它的值是一個number，默認爲0；只要有一個同軸元素被設定了flex-grow ，全部多餘空間都會按照這個比例分配，並讓元素佔滿整行。這個被分配的空間，是算在自身裏面的；

<ul class="box">
        <li class="item" style="flex-grow:1;">1</li>
        <li class="item" style="flex-grow:2;">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

盒子寬度變大了，（就是grow啦）

若是子元素有margin，那麼會先計算橫排多少個，再決定 flex-grow 分配的空間是多少

例如以下代碼，

//沒有設定 flex-grow 時
 <li class="item" style="flex-grow:0;margin: 0 100px;">1</li>
 <li class="item" style="flex-grow:0;">2</li>

//設定了 flex-grow 時
 <li class="item" style="flex-grow:2;margin: 0 100px;">1</li>
 <li class="item" style="flex-grow:1;">2</li>

因此，margin 並不算多餘空間，不會被從新分配；

flex-shrink

此屬性與 flex-grow 有點相反的意思，用於處理不換行時，內容超出屏幕了，應該決定誰來縮小；
值越大縮小比例越大；默認是 1

改一下代碼；

.box{
    flex-flow:row nowrap;
}

<ul class="box">
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>

此時父盒子規定不能換行；可是5個item 寬度已經超過屏幕寬了；此時你們是等比縮小

下面設置1號 flex-shrink：600

<ul class="box">
        <li class="item" style="flex-shrink:600;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>

能夠看到，儘管我把1號設置到縮放很是大了，可是實際寬度並無很小；說明瀏覽器會本身決定內容是否已經足夠放下，夠了就中止縮放；

<ul class="box">
        <li class="item" style="flex-shrink:600;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item" style="flex-shrink:200;">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

當內容很是多時，1號就明顯被縮放得很是厲害，同時我發現，4號儘管設置200，可是它的大小跟被設爲600的 1號是同樣的。

這是由於他們已經縮放到最後只能容納文字的空間了；因此就不會再縮放下去；這跟文字佔位一個道理

flex-basis

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

簡單來講，就是這個值會影響瀏覽器計算的輸入值，有四種狀況

1，原本就會超出，而後你設定的值比原值低（原值200px每一個item），你的元素會被壓縮。

<ul class="box">
        <li class="item" style="flex-basis:100px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item" style="">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

1，原本就會超出，而後你設定的值比原值大，你的元素會被相對放大些。

<ul class="box">
        <li class="item" style="flex-basis:600px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item" style="">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
        <li class="item">7</li>
        <li class="item">8</li>
        <li class="item">9</li>
    </ul>

3 原本不會超出，你設定的值比原來小，你仍是會小一點

<ul class="box">
        <li class="item" style="flex-basis:100px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
    </ul>

4 原本不會超出，你設定的值比原來大，你就會更大

<ul class="box">
        <li class="item" style="flex-basis:600px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
    </ul>

這個值你能夠當作寬度來看，當設定爲跟原來同樣的值得時候，基本沒有變化

<ul class="box">
        <li class="item" style="flex-basis:200px;">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
    </ul>

align-self

此子元素單獨設置垂直方向對齊方式；默認auto 表示父親怎麼定義就怎麼來；其餘值跟align-items是同樣的

<ul class="box">
        <li class="item" style="align-self: center">1</li>
        <li class="item" style="align-self: flex-end">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item" style="align-self: center">5</li>
    </ul>

此屬性主要是方便特殊定位某個字元素

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)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。

實踐技巧

情景一：右邊div 固定，左邊自動分佈空間；

上圖，去結算要固定寬度並靠右顯示；左邊兩個價格自由分配剩餘空間；

佈局(本案例是小程序)

<view class='order-bottom'>
    <view class='bot-left'>
      <text class='dis'>已經優惠 ¥{{discounts}}</text>
      <view class='he'>
        合計<text> ¥{{account-discounts}}</text>
      </view>
    </view>
    <view class='to-pay'>
      去結算
    </view>
 </view>

css：

.order-bottom{
  display: flex;
  justify-content: space-between;
}
.bot-left{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex: 1;
}
.to-pay{
  width: 220rpx;
  height: 100%;
}

情景二：右邊固定高度，左邊文字垂直居中

佈局

<view class='option-item'>
  <view class='opiton-title'>備註：</view>
  <view class='option-val'>
     <textarea/>
  </view>
</view>

css：

.option-item{
  display: flex;
  justify-content: space-between;
  align-content: center;
  font-size: 16px;
}

.opiton-title{
  align-items: center;
  display: flex;
}
.option-val textarea{
  width:400rpx;
  min-height: 50rpx;
}

是否能實現寬度滿了之後自動換行，換行後的元素也自動分佈？

要求一套代碼實現如下效果

html 規定
<div>

<span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
<div>
    <span></span>
    <span></span>
</div>

css

div{
            display: flex;
            width: 300px;
            height: 200px;
            justify-content: space-around;
            flex-wrap: wrap;
            margin: 10px;
        }
        span{
            /*這個min-width 規定了flex能壓縮子元素的最小寬度，配合flex-wrap：warp 就達到自動換行的效果*/
            min-width: 25%;
            height: 50%;
            flex: 1;
            background: red;
            padding: 10px;
            /*背景被裁剪至內容區（content box）外沿。*/
            /*此句設置背景只在內容區域有效，很妙*/
            background-clip: content-box;
            box-sizing: border-box;
        }