box-flex 基礎知識

時間 2019-11-11

標籤 box flex 基礎知識欄目 Flex 简体版

原文原文鏈接

一個完整的Flexbox指南

Flexbox佈局（Flexible Box)模塊旨在提供一個更加有效的方式制定、調整和分佈一個容器裏的項目佈局，即便他們的大小是未知或者是動態的。（這裏咱們稱爲Flex）。css

Flex佈局主要思想是讓容器有能力讓其子項目可以改變其寬度、高度(甚至順序)，以最佳方式填充可用空間（主要是爲了適應全部類型的顯示設備和屏幕大小）。Flex容器會使子項目（伸縮項目）擴展來填滿可用空間，或縮小他們以防止溢出容器。html

最重要的是，Flexbox佈局方向不可預知，他不像常規的佈局（塊就是從上到下，內聯就從左到右）。而那些常規的適合頁面佈局，但對於支持大型或者雜的應用程序（特別是當他涉及到取向改變、縮放、拉伸和收縮等）就缺少靈活性。css3

注：Flexbox佈局最適合應用程序的組件和小規模的佈局，而網格佈局更適合那些更大規模的佈局。web

基本要素

由於Flexbox是整個模塊，而不是一個屬性，它涉及不少東西，包括其整個組屬性。他們當中一部分是容器（父元素，稱爲「伸縮容器」），另外一部分是子元素（稱爲「伸縮項目」）。瀏覽器

常規佈局是基於塊和內聯流方向，而Flex佈局是基於flex-flow流。請看看來自w3c規範中的這張圖，解釋了flex佈局的主要思想。sass

基本上，伸縮項目是沿着主軸（main axis），從主軸起點（main-start）到主軸終點（main-end）或者沿着側軸（cross axis），從側軸起點（cross-start）到側軸終點（cross-end）排列。app

主軸（main axis）：伸縮容器的主軸，伸縮項目主要沿着這條軸進行排列布局。當心，它不必定是水平的；這主要取決於「justify-content」屬性（詳細見下文）。
主軸起點（main-start）和主軸終點（main-end）：伸縮項目放置在伸縮容器內從主軸起點（main-start）向主軸終點（main-start）方向。
主軸尺寸（main size）：伸縮項目在主軸方向的寬度或高度就是主軸的尺寸。伸縮項目主要的大小屬性要麼是寬度，要麼是高度屬性，由哪個對着主軸方向決定。
側軸（cross axis）：垂直於主軸稱爲側軸。它的方向主要取決於主軸方向。
側軸起點（cross-start）和側軸終點（cross-end）：伸縮行的配置從容器的側軸起點邊開始，往側軸終點邊結束。
側軸尺寸（cross size）：伸縮項目的在側軸方向的寬度或高度就是項目的側軸長度，伸縮項目的側軸長度屬性是「width」或「height」屬性，由哪個對着側軸方向決定。

屬性

display:flex | inline-flex;(適用於伸縮容器，也就是伸縮項目的父元素)

這個是用來定義伸縮容器，是內聯仍是塊取決於設置的值。這個時候，他的全部子元素將變成flex文檔流，稱爲伸縮項目。ide

display: other values | flex | inline-flex;

請注意：佈局

CSS的columns在伸縮容器上沒有效果。
float、clear和vertical-align在伸縮項目上沒有效果。

flex-direction（適用於伸縮容器，也就是伸縮項目的父元素）

這個主要用來建立主軸，從而定義了伸縮項目放置在伸縮容器的方向。學習

flex-direction: row | row-reverse | column | column-reverse

row(默認值)：在「ltr」排版方式下從左向右排列；在「rtl」排版方式下從右向左排列。
row-reverse：與row排列方向相反，在「ltr」排版方式下從右向左排列；在「rtl」排版方式下從左向右排列。
column：相似於row，不過是從上到下排列
column-reverse：相似於row-reverse，不過是從下到上排列。

主軸起點與主軸終點方向分別等同於當前書寫模式的始與結方向。其中「ltr」所指文本書寫方式是「left-to-right」也就是從左向右書寫；而「rtl」所指的恰好與「ltr」方式相反，其書寫方式是「right-to-left」，也就是從右向左書寫。

——大漠

flex-wrap(適用於伸縮容器，也就是伸縮項目的父元素)

這個主要用來定義伸縮容器裏是單行仍是多行顯示，側軸的方向決定了新行堆放的方向。

flex-wrap: nowrap | wrap | wrap-reverse

nowrap(默認值)：伸縮容器單行顯示，「ltr」排版下，伸縮項目從左到右排列；「rtl」排版上伸縮項目從右向左排列。
wrap：伸縮容器多行顯示，「ltr」排版下，伸縮項目從左到右排列；「rtl」排版上伸縮項目從右向左排列。
wrap-reverse：伸縮容器多行顯示，「ltr」排版下，伸縮項目從右向左排列；「rtl」排版下，伸縮項目從左到右排列。（和wrap相反）

flex-flow（適用於伸縮容器，也就是伸縮項目的父元素）

這個是「flex-direction」和「flex-wrap」屬性的縮寫版本。同時定義了伸縮容器的主軸和側軸。其默認值爲「row nowrap」。

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content（適用於伸縮容器，也就是伸縮項目的父元素）

這個是用來定義伸縮項目沿着主軸線的對齊方式。當一行上的全部伸縮項目都不能伸縮或可伸縮可是已經達到其最大長度時，這一屬性纔會對多餘的空間進行分配。當項目溢出某一行時，這一屬性也會在項目的對齊上施加一些控制。

justify-content: flex-start | flex-end | center | space-between | space-around

flex-start(默認值)：伸縮項目向一行的起始位置靠齊。
flex-end：伸縮項目向一行的結束位置靠齊。
center：伸縮項目向一行的中間位置靠齊。
space-between：伸縮項目會平均地分佈在行裏。第一個伸縮項目一行中的最開始位置，最後一個伸縮項目在一行中最終點位置。
space-around：伸縮項目會平均地分佈在行裏，兩端保留一半的空間。

align-item（適用於伸縮容器，也就是伸縮項目的父元素）

這個主要用來定義伸縮項目能夠在伸縮容器的當前行的側軸上對齊方式。能夠把他想像成側軸（垂直於主軸）的「justify-content」。

align-items: flex-start | flex-end | center | baseline | stretch

flex-start：伸縮項目在側軸起點邊的外邊距緊靠住該行在側軸起始的邊。
flex-end：伸縮項目在側軸終點邊的外邊距靠住該行在側軸終點的邊。
center：伸縮項目的外邊距盒在該行的側軸上居中放置。
baseline：伸縮項目根據他們的基線對齊。
stretch（默認值）：伸縮項目拉伸填充整個伸縮容器。此值會使項目的外邊距盒的尺寸在遵守「min/max-width/height」屬性的限制下儘量接近所在行的尺寸。

align-content(適用於伸縮容器，也就是伸縮項目的父元素)

這個屬性主要用來調準伸縮行在伸縮容器裏的對齊方式。相似於伸縮項目在主軸上使用「justify-content」同樣。

注：請注意本屬性在只有一行的伸縮容器上沒有效果。

align-content: flex-start | flex-end | center | space-between | space-around | stretch

flex-start：各行向伸縮容器的起點位置堆疊。
flex-end：各行向伸縮容器的結束位置堆疊。
center：各行向伸縮容器的中間位置堆疊。
space-between：各行在伸縮容器中平均分佈。
space-around：各行在伸縮容器中平均分佈，在兩邊各有一半的空間。
stretch（默認值）：各行將會伸展以佔用剩餘的空間。

order（適用於伸縮項目，也就是伸縮容器的子元素）

默認狀況下，伸縮項目是按照文檔流出現前後順序排列。然而，「order」屬性能夠控制伸縮項目在他們的伸縮容器出現的順序。

order: <integer>

flex-grow（適用於伸縮項目，也就是伸縮容器的子元素）

根據須要用來定義伸縮項目的擴展能力。它接受一個不帶單位的值作爲一個比例。主要用來決定伸縮容器剩餘空間按比例應擴展多少空間。

若是全部伸縮項目的「flex-grow」設置了「1」，那麼每一個伸縮項目將設置爲一個大小相等的剩餘空間。若是你給其中一個伸縮項目設置了「flex-grow」值爲「2」，那麼這個伸縮項目所佔的剩餘空間是其餘伸縮項目所佔剩餘空間的兩倍。

flex-grow: <number> (默認值爲： 0)

負值一樣生效。

flex-shrink（適用於伸縮項目，也就是伸縮容器的子元素）

根據須要用來定義伸縮項目收縮的能力。

flex-shrink: <number> (默認值爲： 1)

負值一樣生效。

flex-basis(適用於伸縮項目，也就是伸縮容器的子元素)

這個用來設置伸縮基準值，剩餘的空間按比率進行伸縮。

flex-basis: <length> | auto (默認值爲： auto)

負值不合法。

flex（適用於伸縮項目，也就是伸縮容器的子元素）

這是「flex-grow」、「flex-shrink」和「flex-basis」三個屬性的縮寫。其中第二個和第三個參數（flex-shrink、flex-basis）是可選參數。默認值爲「0 1 auto」。

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

align-self（適用於伸縮項目，也就是伸縮容器的子元素）

用來在單獨的伸縮項目上覆寫默認的對齊方式。

屬性值的介紹請參閱「align-items」的屬性值。

align-self: auto | flex-start | flex-end | center | baseline | stretch

實例

讓咱們先從一個很是簡單的例子開始，解決一個幾乎天天都會碰到的問題：完美的居中。若是你使用flexbox，沒有比這更簡單的方法。

.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}

這個依賴於設置「margin」值爲「auto」值，自動獲取伸縮容器中剩餘的空間。因此設置垂直方向margin值爲「auto」，可使伸縮項目在伸縮容器的兩上軸方向都徹底集中。

如今咱們來使用一些其餘的屬性。

考慮使用6個列表項，而且爲了視覺審美給他設置了一個固定大小尺寸，但他們也有可能能夠自動獲取尺寸大小。咱們但願他們能均勻的、很好的分佈在水平軸上，就算當咱們調整瀏覽器，他們也依然顯示得很好（不使用媒體查詢）。

.flex-container {
  /* 咱們第一步要建立一個flex文檔流（建立伸縮容器） */
  display: flex;
  
  /* 而後咱們定義伸縮流方向，而且能夠換行
   * 記得咱們要這樣設置:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  
  /* 而後咱們定義瞭如何分配伸縮容器的剩餘空間 */
  justify-content: space-around;
}

完成。其餘的一切都不過是一些美化外觀樣式。下面是在codepen上展現的一個例子。到codepen上查看，並試着調整你瀏覽器窗口去看發生什麼事？

讓咱們試試別的。假設咱們網站頂部有一個右對齊的導航，可是咱們但願它在小屏幕和小型設備中能單列居中顯示。很是簡單。

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* 全部列面向主軸終點位置靠齊 */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* 當在中等屏幕中, 導航項目居中顯示，而且剩餘空間平均分佈在列表之間 */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* 在小屏幕下, 咱們沒有足夠空間行排列，但咱們能夠換成列排列 */
    flex-direction: column;
  }
}

讓咱們嘗試一些更靈活性的伸縮項目！關於移動先行，3列布局與頁眉頁腳全屏。和獨立的文檔順序。

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/* 設置全部標籤寬度爲100% */
.header, 
.main, 
.nav, 
.aside, 
.footer {
  flex: 1 100%;
}

/* 咱們利用文檔流順序，考慮移動端先行
 * 在這個例子中的順序:
 * 1. header
 * 2. nav
 * 3. main
 * 4. aside
 * 5. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* 兩個邊欄在同一行 */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* 設置左邊欄在主內容左邊
   * 設置主內容區域寬度是其餘兩個側邊欄寬度的兩倍
   */
  .main { flex: 2 0px; }
  
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

其餘資源

中文資源

Flexbox系列教程（W3cplus提供）

使用Flexbox：新舊語法混用實現最佳瀏覽器兼容

「老」的Flexbox和「新」的Flexbox

使用CSS3 Flexbox佈局

響應式設計的將來——Flexbox

看看接下來會發生什麼：CSS3 Flexible Boxes

跨瀏覽器的Flexbox

Flexbox——快速佈局神器

Flexbox中動畫內幕

深刻了解 Flexbox 伸縮盒模型

Css3-flexbox/zh-hans

CSS 伸縮盒佈局模組

FlexBox簡介

Css3-flexbox

——大漠

瀏覽器兼容

(最近)意味着規範中最近的語法（例如：display:flex;）
（混合）2011年版本語法（例如：display:flexbox;）
（老的）2009年提出的語法（例如：display:box;）

黑莓瀏覽器10 +支持新的語法。全面兼容請觀注：

如何使用混合語法讓瀏覽器獲得最好的支持，有關於這方面的信息，你們能夠閱讀這篇文章(CSS-Tricks)和這篇文章（DevOpera）。

若是你們閱讀英語感受吃力，能夠對應的閱讀中文版本：

Using Flexbox: Mixing Old and New for the Best Browser SupportCSS-Tricks提供，對應的中文教程使用Flexbox：新舊語法混用實現最佳瀏覽器兼容

Advanced cross-browser flexboxDevOpera提供，對應的中文教程跨瀏覽器的Flexbox

使用sass定義一個@mixin更容易解決爲兼容瀏覽器寫的各類混合語法：

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}

.wrapper {
  @include flexbox();
}

.item {
  @include flex(1 200px);
  @include order(2);
}

如需轉載煩請註明出處：

英文原文：http://css-tricks.com/snippets/css/a-guide-to-flexbox

中文譯文：http://www.w3cplus.com/css3/a-guide-to-flexbox.html

flexbox 學習資料網站：http://www.w3cplus.com/blog/tags/157.html

http://www.w3school.com.cn/cssref/pr_box-flex.asp