本文演示 demo 地址 flexbox-demo

簡介

• Flexbox（Flexible Box）彈性盒，彈性盒為 CSS 增加了一種新的布局方式 — 彈性布局。
• 由于桌面瀏覽器對 Flexbox 的支持還未得到普及，因此它還未成為桌面端頁面的主流布局方式。而在移動(dòng)端，當(dāng)瀏覽器的兼容已不是最大的問題時(shí)，我們就可以使用 Flexbox 布局了。
• Flexbox 對于移動(dòng)端有著特別的意義。在傳統(tǒng)的定位方式中有很多float屬性，這些浮動(dòng)對于移動(dòng)端來說就是對渲染性能的消耗。而在 Flexbox 中，浮動(dòng)成為了歷史，這變相提升了移動(dòng)端的性能。此外開發(fā)者也不必再去計(jì)算那些讓人煩惱的 margin、padding、width 和 height，可以把這一切都交給 Flexbox, 由它來選擇最佳的空間利用方式。

基礎(chǔ)知識(shí)

• 彈性容器
  任何 HTML 元素都可以作為彈性容器。
• 彈性項(xiàng)目
  直接嵌套在彈性容器里的標(biāo)簽叫彈性項(xiàng)目。彈性容器的每個(gè)直接子代都會(huì)自動(dòng)變成彈性項(xiàng)目。

彈性容器相關(guān)的屬性

display

/* 把元素設(shè)成彈性容器 */
display: flex

flex-flow

1. 默認(rèn)情況下，彈性項(xiàng)目并排顯示成一行。而且瀏覽器只在一行里顯示各個(gè)彈性項(xiàng)目，不會(huì)換行。
2. flex-flow 屬性是另外兩個(gè)彈性盒相關(guān)的 CSS 屬性的簡寫形式：flex-direction 和 flex-wrap。
3. flex-flow 屬性既能控制彈性項(xiàng)目的排列方向，也能控制是否換行。這個(gè)屬性之間用兩個(gè)值，之間用空格分隔。第一個(gè)指明方向，第二個(gè)值指明是否換行。

• 第一個(gè)參數(shù)：控制方向
  • row：各個(gè)彈性項(xiàng)目并排顯示（默認(rèn)設(shè)置）
  • row-reverse
  • column：各個(gè)彈性項(xiàng)目縱向疊放
  • column-reverse
• 第二個(gè)參數(shù)：控制是否換行
  • nowrap：常規(guī)行為
  • wrap
  • wrap-reverse

.container {
    display: flex;
    flex-flow: column-reverse nowrap;
}

justify-content

• justify-content 屬性告訴瀏覽器把彈性項(xiàng)目顯示在一行里的什么位置。只有為彈性項(xiàng)目設(shè)置了寬度，而且各個(gè)項(xiàng)目的寬度之和小于彈性容器的寬度時(shí)，這個(gè)屬性才起作用。
• 如果寬度是彈性的，justify-content 屬性完全沒有效果。
• 這個(gè)屬性有五個(gè)可選值：
  1. flex-start：項(xiàng)目在一行里靠左對齊。如果把方向設(shè)為 row-reverse，則會(huì)靠右對齊各個(gè)項(xiàng)目。
  2. flex-end：項(xiàng)目在一行里靠右對齊。如果把方向設(shè)為 row-reverse，則會(huì)靠左對齊各個(gè)項(xiàng)目。
  3. center：彈性項(xiàng)目居中顯示在容器中間。
  4. space-between：均布各個(gè)項(xiàng)目，項(xiàng)目之間的空間大小相同，兩邊項(xiàng)目貼近容器邊緣。
  5. space-around：把容器里剩余的控件平均分給各個(gè)項(xiàng)目，包括最左邊和最右邊的項(xiàng)目。

align-items

• align-items 屬性決定高度不同的彈性項(xiàng)目在彈性容器里的縱向?qū)R方式。默認(rèn)情況下，彈性項(xiàng)目會(huì)拉伸，因此高度都相同。
• 如果容器的方向是 column，align-items 屬性用于控制寬度不同縱排彈性項(xiàng)目在彈性容器里的橫向?qū)R方式。
• 這個(gè)屬性有五個(gè)可選值：
  1. flex-start：把各個(gè)彈性項(xiàng)目的頂邊與容器的頂邊對齊。
  2. flex-end：把各個(gè)彈性項(xiàng)目的底邊與容器的底邊對齊。
  3. center：把各個(gè)彈性項(xiàng)目的縱向中心線與容器的縱向中心線對齊。
  4. baseline：把各個(gè)彈性項(xiàng)目里第一個(gè)元素的基線對齊。
  5. stretch：拉伸容器里的各個(gè)項(xiàng)目，使各個(gè)項(xiàng)目的高度相同（常規(guī)行為）。

align-content

• 這個(gè)屬性告訴瀏覽器如何放置顯示為多行的彈性項(xiàng)目
• 只有滿足兩個(gè)條件，align-content 屬性才會(huì)起作用：
  1. 彈性容器必須允許換行。
  2. 彈性容器的高度必須大于多行顯示的彈性項(xiàng)目。
• 這個(gè)屬性有六個(gè)可選值：
  1. flex-start：把各行彈性容器放在彈性容器的頂部。
  2. flex-end：把各行彈性容器放在彈性容器的底部。
  3. center：把各行整體的縱向中心線與容器的縱向中心線對齊。
  4. space-between：把縱向額外的空間平均分布在各行之間，上下兩行貼近容器邊緣。
  5. space-around：把縱向額外的空間平均分布在各行之間，包括上下兩行。
  6. stretch：拉伸容器里的各個(gè)項(xiàng)目，讓一行里的項(xiàng)目高度相同。如果項(xiàng)目里的內(nèi)容不一樣多，可行的高度不相同（常規(guī)行為）。

彈性項(xiàng)目相關(guān)的屬性

order

• order 屬性用于為彈性項(xiàng)目設(shè)置數(shù)值，指明項(xiàng)目在行（或列）里的位置
• order 屬性的數(shù)值與 z-index 屬性的數(shù)值作用類似，因此不必要使用連續(xù)的數(shù)字。
• 有時(shí)可能只想把一列移動(dòng)到最左邊或最右邊。此時(shí)只需為想移動(dòng)的項(xiàng)目設(shè)置 order 屬性，其他項(xiàng)目都別設(shè)置。設(shè)為 -1，項(xiàng)目會(huì)被移到彈性容器的左邊；設(shè)為1，項(xiàng)目會(huì)移到最右邊。

align-self

• 只應(yīng)用于單個(gè)彈性項(xiàng)目，會(huì)覆蓋 align-items 屬性的值。

flex

• flex 屬性可以彈性設(shè)置彈性項(xiàng)目的寬度
• 默認(rèn)值：flex: 0 1 auto;
• flex 屬性有3個(gè)參數(shù)：
  1. flex-grow（當(dāng)項(xiàng)目的寬度之和小于容器的寬度時(shí)有用）
  2. flex-shrink（當(dāng)項(xiàng)目的寬度之和大于容器的寬度時(shí)有用）
  3. flex-basis（允許彈性容器換行時(shí)，flex-basis 屬性值才真正有用）

Tips

• 對彈性項(xiàng)目來說，把外邊距設(shè)為auto的意思是，讓瀏覽器根據(jù)可用空間自行設(shè)置外邊距的大小