flexbox彈性盒子模型

時間 2019-12-14

標籤 flexbox 彈性盒子模型欄目 Flex 简体版

原文原文鏈接

這幾天在作移動端的web開發，遇到了一些問題，以前沒有折騰過這方面的東西，此次好好吸取下css

css3的flexbox--彈性盒子模型，這個盒模型決定了一個盒子在其餘盒子中的分佈方式及如何處理可用的空間。html

優勢：能夠很輕鬆的建立自適應的瀏覽器窗口的流動佈局或自適應字體大小的彈性佈局。前端

1 <body>
2     <div id="box1">1</div>
3     <div id="box2">2</div>
4     <div id="box3">3</div>
5 </body>

一、開啓彈性盒子模型的方式：display: box;css3

【水平或垂直分佈】web

body {
  display: box;
  box-orient: horizontal;    
}

【反向分佈】chrome

body {
  display: box;
  box-orient: vertical;
  box-direction: reverse;      
}

【具體分佈】瀏覽器

/*box-ordinal-group: 定義盒子分佈的順序（數字），分佈從小到大*/
body {
  display: box;
  box-orient: vertical;
  box-direction : reverse;
}
#box1 {
  box-ordinal-group: 2;
}
#box2 {
  box-ordinal-group: 2;
}
#box3 {
  box-ordinal-group: 1;
}

【盒子尺寸】佈局

/*
    默認狀況下，盒子並不具備彈性，若是box-flex的屬性值至少爲1時，則變得富有彈性。
若是盒子不具備彈性，它將盡量的寬使其內容可見，且沒有任何溢出，其大小由「width」和「height」來決定（或min-height、min-width、max-width、max-height）。
若是盒子是彈性的，其大小將按下面的方式計算：

        1. 具體的大小聲明（width、height、min-width、min-height、max-width、max-height）；
        2. 父盒子的大小和全部餘下的可利用的內部空間

若是盒子沒有任何大小聲明，那麼其大小將徹底取決於父box的大小。即：盒子的大小等於父級盒子的大小乘以其box-flex在全部子盒子box-flex總和中的百分比（子盒子的大小=父盒子的大小*子盒子的box-flex/全部子盒子的box-flex值的和）。
若是一個或更多的盒子有一個具體的大小聲明，那麼其大小將計算其中，餘下的彈性盒子將按照上面的原則分享剩下的可利用空間。
看看下面的例子，理解起來更容易。
全部盒子都是彈性的
下面的例子中，box1的大小爲box2的兩倍，box2與box3大小同樣。看起來好像是用百分比定義盒子的大小，可是有一個區別：使用彈性盒模型，增長一個盒子，無須從新計算其大小。
*/
body {
  display: box;
  box-orient: horizontal;
}
#box1 {
  box-flex: 2;
}
#box2 {
  box-flex: 1;
}
#box3 {
  box-flex: 1;
}

【一些盒子有固定大小】測試

/*
    公式：子盒子的大小=父盒子的大小*子盒子的box-flex/全部子盒子的box-flex值的和
    下面的例子中，box3並非彈性的，寬度爲160px；這樣box1和box2將有240px的可利用空間。所以，box1的寬度爲160px(240*2/3)，box2的寬度爲80px(240*1/3)。
*/

body {
  display: box;
  box-orient: horizontal;
  width: 400px;
}
#box1 {
  box-flex: 2;
}
#box2 {
  box-flex: 1;
}
#box3 {
  width: 160px;
}

【空間太多如何處理】字體

/*
    可利用空間的分佈取決於兩個屬性值：box-align 和 box-pack。
屬性「box-pack」管理水平方向上的空間分佈，有如下四個可能屬性：start、end、 justify、 or center。

        1. start 全部盒子在父盒子的左側，餘下的空間在右側；
        2. end全部盒子在父盒子的右側，餘下的空間在左側；
        3. justify 餘下的空間在盒子間平均分配；
        4. center 可利用的空間在父盒子的兩側平均分配。

屬性「box- align」管理垂直方向上的空間分佈，有如下五個可能屬性之：start、 end,、center、 baseline和 stretch。

        1. start 每一個盒子沿父盒子的上邊緣排列，餘下的空間位於底部；
        2. end 每一個盒子沿父盒子的下邊緣排列，餘下的空間位於頂部；
        3. center 可用空間平均分配，上面一半，下面一半；
        4. baseline 全部盒子沿着它們的基線排列，餘下的空間可前可後；
        5. stretch 每一個盒子的高度調整到適合父盒子的高度
*/

body {
  display: box;
  box-orient: horizontal;
  width: 400px;
}
#box1 {
  box-flex: 2;
}
#box2 {
  box-flex: 1;
}
#box3 {
  width: 160px;
}

【空間不足怎麼辦】

與傳統的盒模型同樣，overflow屬性用來決定其顯示方式。爲了不溢出，你能夠設置box-lines爲multiple使其換行顯示。
彈性盒模型看起來很不錯，Gecko 和 WebKit對該模型都有一些嘗試性的測試。在這些屬性以前加上-moz和-webkit便可使用該屬性。也便是說，firefox、safari、chrome可使用這些特性。
做爲前端開發者來講，該模型對咱們解決網頁設計中一些常見的問題很是方便，如：表單佈局、垂直居中、視覺上分離html流，等等。不久的未來它將成爲一個web標準，早早熟悉它不是什麼壞事。

內容通過一些修改和整理：出於豆瓣分享平臺

更多關於css彈性盒: 更多