flexbox 彈性盒子布局

适用範圍

1、在父内容裡面垂直居中一個塊内容。

2、使容器的所有子項占用等量的可用寬度/高度，而不管有多少寬度/高度可用。

3、使多列布局中的所有列采用相同的高度，即使它們包含的内容量不同。、

使用方法

例如布局模式為：

section  -- article
			article
			article
           

如圖：

父元素display标簽設定為flex，父元素稱為flex容器，子元素稱為flex項，預設主軸為row，交叉軸為column

flex-flow參數

flex-flow: row wrap;
           

row代表主軸方向，即子元素延申方向

wrap代表換行（當寬度超出溢出的時候）

子元素設定

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}
           

第一個參數是配置設定比例，在這裡是按照1：1：2配置設定；

第二個參數是最小寬度

在這裡合用表示每個flex 項将首先給出200px的可用空間，然後，剩餘的可用空間将根據配置設定的比例共享

水準垂直對齊

剛剛上面的設定可以讓子元素的寬度和高度相等，無論内容多少，無論有多少寬度高度可用，解決了最開始提出的2、3問題；

如何水準垂直對齊：

結構如下

div -- button
	   button
	   button
	   button
           

div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
           

align-items 控制flex項在交叉軸上的位置

1、預設的值是 stretch，其會使所有 flex 項沿着交叉軸的方向拉伸以填充父容器。如果父容器在交叉軸方向上沒有固定寬度（即高度），則所有 flex 項将變得與最長的 flex 項一樣長（即高度保持一緻）。我們的第一個例子在預設情況下得到相等的高度的列的原因。

2、在上面規則中我們使用的 center 值會使這些項保持其原有的高度，但是會在交叉軸居中。這就是那些按鈕垂直居中的原因。

3、你也可以設定諸如 flex-start 或 flex-end 這樣使 flex 項在交叉軸的開始或結束處對齊所有的值。

（我覺得這樣做會導緻高度不一緻，是以盡量對原本高度一緻的塊用這個參數，同時如果要對某一個子元素單獨修改，可以在子元素的css屬性裡面用align_self:…)

justify_centent控制在主軸位置，以下幾個參數：

flex_start：預設，所有子元素在主軸開始處

flex_end：結尾處

center: 居中

space_around : 均勻分布，端口留有空間

space_between : 不留白間

排序

子元素參數

button:first-child {
  order: 1;
}
           

預設都是0；

越大越靠後；

可以為負數；

相同按照源檔案排

原文連結：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox

GitHub代碼位址：flex彈性盒子