CSS3彈性盒模型flexbox完整版教程

http://caibaojian.com/flexbox-guide.html

 

 

來自CSS Tricks上的一個教程，原文爲：A Complete Guide to Flexbox。文中詳細的介紹了新版的彈性盒子的相關屬性，而且給出了幾個使用例子。是新手入門flexbox的一個優秀教程。固然裏面的內容也大部分是根據w3c的文章來寫的。裏面的每一個屬性都給出了一張示例圖，很是容易理解。本人根據其思路，結合中文翻譯，寫出了一篇flexbox的完整教程，但願對你們有用。

彈性佈局（flexible box）模塊（目前是w3c候選的推薦）旨在提供一個更加有效的方式來佈置，對齊和分佈在容器之間的各項內容，即便它們的大小是未知或者動態變化的。

彈性佈局的主要思想是讓容器有能力來改變項目的寬度和高度，以填滿可用空間（主要是爲了容納全部類型的顯示設備和屏幕尺寸）的能力。

最重要的是彈性盒子佈局與方向無關，相對於常規的佈局（塊是垂直和內聯水平爲基礎），很顯然，這些工做以及網頁設計缺少靈活性，沒法支持大型和複雜的應用程序（特別當它涉及到改變方向，縮放、拉伸和收縮等）。

注意： Flexbox佈局是最合適的一個應用程序的組件，以及小規模的佈局，而網格佈局是用於較大規模的佈局。

基礎知識

因爲flexbox是一個總體模塊，而不是單一的一個屬性，它涉及到了不少東西，包括它的整個屬性集。它們之中有一些是在父容器上設置，而有一些則是在子容器上設置。

若是常常佈局基於塊和內嵌流方向，柔性佈局基於「柔性流動方向」。請看看這個數字從規範，解釋背後的柔性佈局的主要思路。

基本上，項目將制定瞭如下任一主軸（從 main-start 到 main-end）或十字軸（(從 cross-start 到 cross-end）。

屬性介紹

display: flex | inline-flex; (適用於父類容器元素上)

定義一個flex容器，內聯或者根據指定的值，來做用於下面的子類容器。

• box：將對象做爲彈性伸縮盒顯示。（伸縮盒最老版本）（css3）
• inline-box：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
• flexbox：將對象做爲彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
• inline-flexbox：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
• flex：將對象做爲彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
• inline-flex：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

請注意：

1.css 列（CSS columns）在彈性盒子中不起做用

2.float, clear and vertical-align 在flex項目中不起做用

flex-direction (適用於父類容器的元素上)

定義：設置或檢索伸縮盒對象的子元素在父容器中的位置。

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

• row：橫向從左到右排列（左對齊），默認的排列方式。
• row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
• column：縱向排列。
• row-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。

flex生效需定義其父元素display爲flex或inline-flex(box或inline-box，這是舊的方式)

演示：flex-direction

flex-wrap (適用於父類容器上)

設置或檢索伸縮盒對象的子元素超出父容器時是否換行。

flex-wrap: nowrap | wrap | wrap-reverse

• nowrap：當子元素溢出父容器時不換行。
• wrap：當子元素溢出父容器時自動換行。
• wrap-reverse：反轉 wrap 排列。

演示：flex-wrap

flex-flow (適用於父類容器上)

複合屬性。設置或檢索伸縮盒對象的子元素排列方式。

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

• [ flex-direction ]：定義彈性盒子元素的排列方向。
• [ flex-wrap ]：定義彈性盒子元素溢出父容器時是否換行。

演示：flex-flow

justify-content (適用於父類容器上)

設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。

當彈性盒裏一行上的全部子元素都不能伸縮或已經達到其最大值時，這一屬性可協助對多餘的空間進行分配。當元素溢出某行時，這一屬性一樣會在對齊上進行控制。

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

• flex-start：彈性盒子元素將向行起始位置對齊。該行的第一個子元素的主起始位置的邊界將與該行的主起始位置的邊界對齊，同時全部後續的伸縮盒項目與其前一個項目對齊。
• flex-end：彈性盒子元素將向行結束位置對齊。該行的第一個子元素的主結束位置的邊界將與該行的主結束位置的邊界對齊，同時全部後續的伸縮盒項目與其前一個項目對齊。
• center：彈性盒子元素將向行中間位置對齊。該行的子元素將相互對齊並在行中居中對齊，同時第一個元素與行的主起始位置的邊距等同與最後一個元素與行的主結束位置的邊距（若是剩餘空間是負數，則保持兩端相等長度的溢出）。
• space-between：彈性盒子元素會平均地分佈在行裏。若是最左邊的剩餘空間是負數，或該行只有一個子元素，則該值等效於'flex-start'。在其它狀況下，第一個元素的邊界與行的主起始位置的邊界對齊，同時最後一個元素的邊界與行的主結束位置的邊距對齊，而剩餘的伸縮盒項目則平均分佈，並確保兩兩之間的空白空間相等。
• space-around：彈性盒子元素會平均地分佈在行裏，兩端保留子元素與子元素之間間距大小的一半。若是最左邊的剩餘空間是負數，或該行只有一個伸縮盒項目，則該值等效於'center'。在其它狀況下，伸縮盒項目則平均分佈，並確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最後一個元素後的空間爲其餘空白空間的一半。

演示：justify-content

align-items (適用於父類容器上)

設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。

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

• flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
• flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
• center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
• baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊。
• stretch：若是指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸，但同時會遵守'min/max-width/height'屬性的限制。

演示：align-items

align-content (適用於父類容器上)

設置或檢索彈性盒堆疊伸縮行的對齊方式。

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

• flex-start：各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界，以後的每一行都緊靠住前面一行。
• flex-end：各行向彈性盒容器的結束位置堆疊。彈性盒容器中最後一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界，以後的每一行都緊靠住前面一行。
• center：各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊，保持彈性盒容器的側軸起始內容邊界和第一行之間的距離與該容器的側軸結束內容邊界與第最後一行之間的距離相等。（若是剩下的空間是負數，則各行會向兩個方向溢出的相等距離。）
• space-between：各行在彈性盒容器中平均分佈。若是剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'flex-start'。在其它狀況下，第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最後一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界，剩餘的行則按必定方式在彈性盒窗口中排列，以保持兩兩之間的空間相等。
• space-around：各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。若是剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'center'。在其它狀況下，各行會按必定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其餘空間的一半。
• stretch：各行將會伸展以佔用剩餘的空間。若是剩餘的空間是負數，該值等效於'flex-start'。在其它狀況下，剩餘空間被全部行平分，以擴大它們的側軸尺寸。

演示：align-content

order (適用於彈性盒模型容器子元素)

order: <integer>

• <integer>：用整數值來定義排列順序，數值小的排在前面。能夠爲負值。

演示：order

flex-grow (適用於彈性盒模型容器子元素)

設置或檢索彈性盒的擴展比率。

根據彈性盒子元素所設置的擴展因子做爲比率來分配剩餘空間。

flex-grow: <number> (default 0)

• <number>：用數值來定義擴展比率。不容許負值
• flex-grow的默認值爲0，若是沒有顯示定義該屬性，是不會擁有分配剩餘空間權利的。本例中b,c兩項都顯式的定義了flex-grow，能夠看到總共將剩餘空間分紅了4份，其中b佔1份，c佔3分，即1:3

演示：flex-grow

flex-shrink (適用於彈性盒模型容器子元素)

設置或檢索彈性盒的收縮比率（根據彈性盒子元素所設置的收縮因子做爲比率來收縮空間。）

flex-shrink: <number> (default 1)

演示：flex-shrink

說明：

• flex-shrink的默認值爲1，若是沒有顯示定義該屬性，將會自動按照默認值1在全部因子相加以後計算比率來進行空間收縮。
• 本例中c顯式的定義了flex-shrink，a,b沒有顯式定義，但將根據默認值1來計算，能夠看到總共將剩餘空間分紅了5份，其中a佔1份，b佔1份，c佔3分，即1:1:3
• 咱們能夠看到父容器定義爲400px，子項被定義爲200px，相加以後即爲600px，超出父容器200px。那麼這麼超出的200px須要被a,b,c消化
• 按照以上定義a,b,c將按照1:1:3來分配200px，計算後便可得40px,40px,120px，換句話說，a,b,c各須要消化40px,40px,120px，那麼就須要用原定義的寬度相減這個值，最後得出a爲160px，b爲160px，c爲80px

flex-basis (適用於彈性盒模型容器子元素)

設置或檢索彈性盒伸縮基準值。

flex-basis: <length> | auto (default auto)

• auto：無特定寬度值，取決於其它屬性值
• <length>：用長度值來定義寬度。不容許負值
• <percentage>：用百分比來定義寬度。不容許負值

演示：flex-basis

flex (適用於彈性盒模型子元素)

複合屬性。設置或檢索伸縮盒對象的子元素如何分配空間。

若是縮寫flex:1, 則其計算值爲：1 1 0

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

• none：none關鍵字的計算值爲: 0 0 auto
• [ flex-grow ]：定義彈性盒子元素的擴展比率。
• [ flex-shrink ]：定義彈性盒子元素的收縮比率。
• [ flex-basis ]：定義彈性盒子元素的默認基準值。

演示：flex

說明：

• 上例中，定義了父容器寬（即主軸寬）爲800px，因爲子元素設置了伸縮基準值flex-basis，相加300+500+600=1400，那麼子元素將會溢出1400-800=600px；
• 因爲同時設置了收縮因子，因此加權綜合可得300*1+500*2+600*3=3100px；
• 因而咱們能夠計算a,b,c將被移除的溢出量是多少：
• a被移除溢出量：300*1/3100*600=3/31，即約等於58px
• b被移除溢出量：500*2/3100*600=10/31，即約等於194px
• c被移除溢出量：600*3/3100*600=18/31，即約等於348px
• 最後a,b,c的實際寬度分別爲：300-58=242px, 500-194=306px, 600-348=252px

align-self (適用於彈性盒模型子元素)

設置或檢索彈性盒子元素自身在側軸（縱軸）方向上的對齊方式。

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

• auto：若是'align-self'的值爲'auto'，則其計算值爲元素的父元素的'align-items'值，若是其沒有父元素，則計算值爲'stretch'。
• flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
• flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
• center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
• baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊。
• stretch：若是指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸，但同時會遵守'min/max-width/height'屬性的限制。

演示：align-self

經常使用例子

1.居中對齊

.flex-container {
  /* We first create a flex layout context */
  display: flex;

  /* Then we define the flow direction and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
}

1. 經過設置父類容器的css代碼控制子元素的排列方式（flex-direction:row）從左到右（默認方式）。
2. 子元素超出內容時是否換行。flex-wrap:wrap（採用換行的方式）。
3. 合起來就是flex-flow:row wrap
4. 設置子元素的彈性盒堆疊伸縮行的對齊方式爲在盒子中平局分佈 justify-content:space-around

演示：flexbox3

2.自適應導航

/* Large */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /* This aligns items to the end line on main-axis */
  justify-content: flex-end;
}

/* Medium screens */
@media all and (max-width: 800px) {
  .navigation {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    justify-content: space-around;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .navigation {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
}

1. 設置子元素爲從左到右（flex-direction:row），內容超出換行（flex-wrap:wrap）.
2. 設置子元素的內容向右對齊（justify-content:flex-end）
3. 當小於800px時，內容爲居中，當小於500px時，內容縱向排列，從上到下。

演示：flexbox4

3.常見3欄移動優先佈局

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

/* We tell all items to be 100% width */
.header, .main, .nav, .aside, .footer {
  flex: 1 100%;
}

/* We rely on source order for mobile-first approach
 * in this case:
 * 1. header
 * 2. nav
 * 3. main
 * 4. aside
 * 5. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main { flex: 2 0px; }

  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

1. 設置子元素從左到右，超出換行（flex-flow:row wrap;）。
2. 默認狀況下全部子元素拓展比例爲1（flex-grow:1），伸縮比例爲100%（flex-basis:100%）。
3. 大於800px時，.main的拓展比例爲2.伸縮值爲0（flex-basis:0px）,而且側欄aside-1排列在第一位，main在第二位，aside-2在第三位。
4. 大於600時。.aside元素的拓展比例爲1（flex-grow:1），伸縮比例爲auto（flex-basis:auto）。

演示：flexbox5