摘要：應(yīng)該把其中的每一行都視為多帶帶的彈性容器。這個空間被稱為正自由空間。這項工作是在文件中完成的，它負(fù)責(zé)跟蹤項目依賴及其版本。

翻譯：瘋狂的技術(shù)宅
原文：https://medium.com/swlh/css-f...

本文首發(fā)微信公眾號：jingchengyideng
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

Flexbox是 Flexible Box Module（彈性盒模型）的縮寫。 是一種可以輕松控制html元素之間的空間分布和對齊的布局模型。

Flexbox同一時間只能控制行或列中的一個維度。對于二維控制需要 CSS 網(wǎng)格布局。

首先給出如下模板：

  

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
  

以上 div 的默認(rèn)行為遵循普通的html文檔流，將會從上到下、從左到右呈現(xiàn)，并采用整個 body 的寬度，因為其 display 屬性默認(rèn)為block。

當(dāng) display: flex 應(yīng)用于 .container div 時，所有直接子div都變?yōu)? flex-items，并獲得新的行為

它們將顯示在同一行中，因為flex-direction默認(rèn)為row

它們將會從左到右顯示

其中的項目不會自動伸展來適應(yīng)整個寬度（主軸），為了做到這一點，它們會縮小。

項目會被拉伸以適合交叉軸（在此示例中為高度）。 如果這些項目的高度不一致，它們將會伸展到最高的那個高度

flex-basis 默認(rèn)為 auto（項目寬度將由其內(nèi)容決定）

flex-wrap 默認(rèn)為nowrap（如果容器的寬度不足以適合這些項目，它們不會換行，而是會溢出）

出于可視化的目的，讓我們拉伸容器使其占據(jù)整個高度。

display:flex 使容器擴(kuò)展至整個可用寬度。 這點與 display:inline-flex 相反，它使容器縮小到內(nèi)容的寬度。

一旦被聲明為 flex 容器，就可以認(rèn)為該元素具有兩個軸：主軸與交叉軸。 主軸由flex-direction屬性定義。 交叉軸垂直于前者。

flex-direction 屬性有四個值：row，row-reverse，column 和 column-reverse。

其默認(rèn)值為row，它從左到右水平設(shè)置主軸，交叉軸從上到下垂直截取。 類似地， column 值從頂部到底部垂直設(shè)置主軸，從左到右設(shè)置交叉軸。 這兩個選項的相反屬性使主軸反轉(zhuǎn)180°。 交叉軸保持不變。

可以通過下圖觀察這些值的 flex-items 行為：

當(dāng)容器中的空間不足以容納其中的彈性項目時，可以用 flex-wrap 來處理。

在默認(rèn)情況下，flex-wrap 被設(shè)置為 nowrap，這意味著如果容器不能適應(yīng)在其內(nèi)的行中原始寬度的項目，則這些項目將會縮小來進(jìn)行適應(yīng)。 如果它們因為某種原因無法收縮，則會溢出容器。

把項目寬度設(shè)置為300px，nowrap 選項會輸出以下結(jié)果：

其中，每個項目都會縮小到大約 70px 來適合容器。

當(dāng)屬性被更新為wrap時，現(xiàn)在項目的寬度實際上是原始值300px。 當(dāng)?shù)谝恍胁蛔阋匀菁{300px時，則該項目將換行到新的一行，而不是溢出容器。 應(yīng)該把其中的每一行都視為多帶帶的彈性容器。 一個容器中的空間分布不會影響到與其相鄰的其他容器。

但是為什么彈性項目會占據(jù)整個屏幕高度呢？ 在第一部分中，容器高度設(shè)置為 100vh ，因此可用空間被平均分為四行，來適合 300px 項目的需要。 如果我們沒有設(shè)置 100vh，容器的高度則會遵循項目內(nèi)容的高度，如下圖所示：

另一個選項是wrap-reverse，它會反轉(zhuǎn)交叉軸。 通過 flex-direction 屬性從上到下設(shè)置，wrap-reverse 將其轉(zhuǎn)換為從下到上。

通過使用 flex-direction:column 反轉(zhuǎn)主軸，不適應(yīng)的元素會被換到另一列，剩余空間被均勻分割。

wrap-reverse 選項會沿著列方向?qū)⒔徊孑S從右向左反轉(zhuǎn)，產(chǎn)生以下輸出：

由于flexbox是單維度布局，所以在進(jìn)行反轉(zhuǎn)時，項目從下到上進(jìn)行排列（對于行方向），但保持左右結(jié)構(gòu)，只改變了交叉軸。

flex-direction 和 flex-wrap 可以在一個屬性當(dāng)中聲明：flex-flow:[direction][wrap] 。

.flex-container {
  flex-flow : column wrap;
}

讓我們回到row/wrap。 可以通過設(shè)置項目的 width:33.3333％ 來填充整個容器：

但是如果你希望在子div 之間有一個間隙，它們就不會按照你想的那樣換行：

這個小麻煩這可以通過 CSS 函數(shù) calc() 來解決：

.flex-item {
  width: calc(33.33333% - 40px);
  margin: 20px;
}

為了消除容器邊緣的空間，可以在容器上使用負(fù)邊距：

.flex-container {
  margin: -20px;
}

order 屬性允許更改出現(xiàn)的可視排序項目。排序被分配給組。 默認(rèn)情況下所有的彈性項目都設(shè)置為 order: 0，這意味著所有項目都屬于同一組，并且它們將按照原始順序定位。 在兩個或多個組的情況下，組會相對于它們的整數(shù)值進(jìn)行排序。

在下面的例子中，有三個 ordinal groups：-1, 0和 1，按此順序進(jìn)行排列。

.box-3 { order: 1; }
.box-7 { order: 1; }
.box-8 { order: -1; }

此屬性可視地重新分配項目，但在交互時保持其原始源位置，例如使用Tab鍵遍歷它們。 如果物品訂購對可訪問性有影響，則可以考慮這一點。 flex-direction 也是如此。

（此圖反復(fù)上傳總是出錯，請大家移步原文查看）

在Flexbox中，沿著軸的項目對齊和空間分布可以受到四個屬性的控制：

justify-content: 對齊主軸中的所有項目

align-items: 對齊交叉軸中的所有項目

align-self: 對齊交叉軸中的單個項目

align-content: 控制交叉軸上柔性線之間的空間

適用于容器，justify-content 處理項目在主軸上的對齊方式。六個最常用的選項包括： flex-start、 flex-end、center、 space-around、 space-between 和 space-evenly，flex-start是默認(rèn)值。.

也適用于容器， align-items 屬性處理交叉軸方向上的對齊。它的默認(rèn)值是 stretch 其它的選項是 flex-start、flex-end、 center 和 baseline 。

stretch 選項使所有項目伸展到容器高度（如果設(shè)置）或最高項目的高度[5]。 第一張圖片顯示容器高度設(shè)置為 100vh，未設(shè)置第二個高度。

這是作用在 flex 容器的四個屬性中的最后一個，align-content 在交叉軸中的彈性線之間分配空格。 作為后者，它的初始值是 stretch 和 justify-content，它接受以下選項： flex-start, flex-end, center, space-around, space-between, space-evenly 。

align-items 屬性實際上通過在容器內(nèi)的所有 flex 項目上設(shè)置 align-self 來實現(xiàn)。 通過多帶帶設(shè)置 align-self，可以覆蓋全局值。 它接受與align-items和"auto"相同的值[5]。

auto 選項通過 align-items 將 align-self 重置為容器全局定義的值。

項目的尺寸和伸展性可以通過三種屬性來控制： flex-grow、 flex-shrink 和 flex-basis。 這三個都作用于主軸。

flex-grow：如果有額外的空間，每個項目應(yīng)該如何放大

flex-shrink：如果沒有足夠的空間，應(yīng)該如何縮小每個項目

flex-basis：在設(shè)置上述兩個屬性之前，該項目的大小應(yīng)該是多少

由此屬性設(shè)置的 flex grow factor （彈性增長因子）用來處理項目大小相對于彼此的比率。

默認(rèn)值為 0，這意味著如果還有可用空間，就把它放在最后一個項目之后。

在上面的例子中，direction 被設(shè)置為 row，每個彈性項目的 width 被設(shè)置為 60px。 由于容器寬是 980px，所以剩余的可用空間為 680px。 這個空間被稱為positive free space （正自由空間）。

如果將 flex-grow 設(shè)置為1，正可用空間量會在彈性項目之間平均分配。 每個項目的寬度將會增加 136px，總寬度為196px。

通過將 flex-grow: 2 應(yīng)用到第三個項目，它會得到比其它項目多出兩倍的可用正自由空間，即286px，其他項目仍為173px 。

下圖顯示了把項目的 flex-grow 屬性值設(shè)置為其內(nèi)容對應(yīng)的數(shù)字時的情形。

當(dāng)沒有足夠的可用空間來容納所有容器時，用 flex-shrink 處理項目大小。 它通過縮小這些項目來劃分它們之間的 negative free space （負(fù)自由空間）。

下圖顯示的是寬度為 980px 的容器，它容納了5個寬度為 300px的物品。 由于沒有空間容納所需的總寬度 1500px，所以默認(rèn)的flex shrink factor（彈性收縮系數(shù)）的值為1，這樣會使每個項目的寬度均勻縮小到196px。

通過將第三項的比率設(shè)置為2，它縮小為其余項目大小的二分之一。

本節(jié)的最后一張圖顯示了將每個項目的內(nèi)容值對應(yīng)的數(shù)字設(shè)定為 flex-shrink 的值時的情形。

flex-basis 是在實際設(shè)置可用空間之前，檢查每個項目本來應(yīng)具有的大小的屬性。 默認(rèn)值為 auto，項寬度由 width 屬性顯式設(shè)置，或者取其內(nèi)容寬度。 它也接受像素值。

下面的動圖顯示了一個800px寬的容器和五個設(shè)置為 flex-basis:160px 的彈性項目。 這告訴瀏覽器：如果在理想狀態(tài)下，有足夠的空間來放置所有的項目，就遵循它們的160px寬度，并且沒有正/負(fù)可用空間；如果沒有足夠的空間的話，那么 flex-shrink 默認(rèn)為1，所有項目均勻收縮； 如果有額外的空間，flex-grow 默認(rèn)為0，并且剩余的空間放在最后一個項目之后。

下一個動圖展示了把項目1設(shè)置為flex-shrink:10，項目4設(shè)置為flex-grow:10。對于負(fù)自由空間，項目1的寬度減少10倍。 對于正空閑空間，第4項的寬度是其他空間的10倍。

flex-basis 也接受值 content，此時無論其寬度是否被設(shè)置，計算自由空間時所考慮的寬度依據(jù)是項目中的內(nèi)容。

flex 屬性是按順序排列的 flex-grow、 flex-shrink 和 flex-basis 的簡寫，它接受以下預(yù)定義值：

initial：重置為 flexbox 的默認(rèn)值，等同于 flex: 0 1 auto

auto：flex-items能夠根據(jù)需要增長/縮小，等同于 flex: 1 1 auto

none：固定項目，等同于 flex: 0 0 auto

flex: 1：flex-items 具有伸縮的能力，flex-basis 設(shè)置為零，等同于 flex: 1 1 0

對于跨瀏覽器的兼容性問題，設(shè)置具有具有必要前綴的屬性是非常重要的，以確保能夠支持所有瀏覽器。

手動自動為每個屬性添加前綴可能是一項非常繁瑣的任務(wù)，也使樣式很難維護(hù)。使用 Gulp 能夠替你自動執(zhí)行這些任務(wù)。

為了能夠使用Gulp，我們必須將它作為依賴添加到項目當(dāng)中。 這項工作是在 package.json 文件中完成的，它負(fù)責(zé)跟蹤項目依賴及其版本。 在終端中輸入下列命令來創(chuàng)建文件：

nmp init

系統(tǒng)將提示你輸入項目信息，可以一直按回車鍵直到完成。 輸出的文件內(nèi)容將是這樣的：

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "Project description",
  "main": "index.js",
  "scripts": { "test": "echo "Error: no test specified" && exit 1" },
  "author": "Author Name",
  "license": "ISC"
}

全局安裝gulp：

npm install gulp -g

安裝 gulp 和 gulp-autoprefixer 作為項目依賴項：

npm install gulp --save-dev
npm install gulp-autoprefixer --save-dev

它們將會出現(xiàn)在 package.json 文件中的 devDependencies 下。

創(chuàng)建一個gulpfile.js文件：

touch gulpfile.js

添加以下內(nèi)容：

// gulpfile.js

var gulp = require("gulp");
var autoprefixer = require("gulp-autoprefixer");
var options = { browsers: ["last 2 versions"], cascade: false };

gulp.task("styles", function() {
  return gulp.src("./styles.css")
             .pipe(autoprefixer(options))
             .pipe(gulp.dest("build"));
});

gulp 會從 styles.css 中提取內(nèi)容并通過 gulp-autoprefixer 傳遞它。 處理結(jié)果會保存在build文件夾下。

What the Flexbox Course

Basic concepts of flexbox?—?25/03/2018

Mastering Wrapping of Flex Items?—?26/03/2018

Ordering Flex Items?—?26/03/2018

Aligning Items in a Flex Container?—?26/03/2018

StackOverflow?—?27/03/2018

Controlling Ratios of Flex Items Along the Main Axis?—?28/03/2018

Gulp

Gulp Autoprefixer