Flexbox詳解

In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.(W3C)

以上為W3C對flexbox的部分解釋，大概就是說flexbox的出現是為了解決複雜的web布局，因為這種布局方式很靈活。容器的子元素可以任意方向進行排列。此屬性目前處于非正式标準，以下是各浏覽器對flexbox的支援程度，在較新的浏覽器中基本可以使用該屬性。

Flexbox詳解

Flexbox模型及術語

flex布局模型不同于塊和内聯模型布局，塊和内聯模型的布局計算依賴于塊和内聯的流方向，而flex布局依賴于flex directions.簡單的說：Flexbox是布局子產品，而不是一個簡單的屬性，它包含父元素(flex container)和子元素(flex items)的屬性。

主軸、主軸方向(main axis |main dimension)：使用者代理沿着一個伸縮容器的主軸配置伸縮項目，主軸是主軸方向的延伸。

主軸起點、主軸終點(main-start |main-end)：伸縮項目的配置從容器的主軸起點邊開始，往主軸終點邊結束。
主軸長度、主軸長度屬性(main size |main size property)：伸縮項目的在主軸方向的寬度或高度就是項目的主軸長度，伸縮項目的主軸長度屬性是width或height屬性，由哪一個對着主軸方向決定。
側軸、側軸方向(cross axis |cross dimension)：與主軸垂直的軸稱作側軸，是側軸方向的延伸。
側軸起點、側軸終點(cross-start |cross-end)：填滿項目的伸縮行的配置從容器的側軸起點邊開始，往側軸終點邊結束。
側軸長度、側軸長度屬性(cross size |cross size property)：伸縮項目的在側軸方向的寬度或高度就是項目的側軸長度，伸縮項目的側軸長度屬性是"width"或"height"屬性，由哪一個對着側軸方向決定。
Flexbox詳解

Flexbox使用示例

水準豎直居中

下面這個例子是我們用的很多的完全居中（上下左右居中），我們可以用很多種方法實作，但目前隻有用Flexbox實作是最為簡單的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>center</title>
    <link rel="stylesheet" href="./center.css">
</head>
<body>
    <div class="parent"><div class="child"></div></div>
</body>
</html>

body{
    padding: ;
    margin: ;
}

.parent {
  display: flex;
  height: ; /* Or whatever */
  background-color: black;
}

.child {
  width: ;  /* Or whatever */
  height: ; /* Or whatever */
  margin: auto;  /* Magic! */
  background-color: white;
}

在Flex容器中，當項目邊距設定為“auto”時，設定自動的垂直邊距将使該項目完全集中兩個軸。

六個子元素布局

再看一個例子，将子元素的數量增加到六個。六個子元素随着浏覽器大小改變布局而不需要用媒體查詢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>six</title>
    <link rel="stylesheet" href="./six.css">
</head>
<body>
    <ul class="flex-container">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
        <li class="flex-item">4</li>
        <li class="flex-item">5</li>
        <li class="flex-item">6</li>
    </ul>
</body>
</html>

.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;
}
.flex-item {
    background: tomato;
    padding: ;
    width: ;
    height: ;
    margin-top: ;

    line-height: ;
    color: white;
    font-weight: bold;
    font-size: ;
    text-align: center;
}

效果如下：

Flexbox詳解

實作圖中效果，需要設定三個屬性：flex-direction: row; flex-wrap: wrap; justify-content: space-around;下節将介紹各屬性。

屬性

1.display（flex container）

2.flex-direction（flex container）

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

row(預設值)：在“ltr”排版方式下從左向右排列；在“rtl”排版方式下從右向左排列。
row-reverse：與row排列方向相反，在“ltr”排版方式下從右向左排列；在“rtl”排版方式下從左向右排列.
column：類似于row，不過是從上到下排列.
column-reverse：類似于row-reverse，不過是從下到上排列。

Flexbox詳解

3.order（flex items）

預設情況下，伸縮項目是按照文檔流出現先後順序排列。然而，“order”屬性可以控制伸縮項目在他們的伸縮容器出現的順序。

Flexbox詳解

4.flex-wrap（flex container）

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

nowrap(預設值)：伸縮容器單行顯示，“ltr”排版下，伸縮項目從左到右排列；“rtl”排版上伸縮項目從右向左排列。
wrap：伸縮容器多行顯示，“ltr”排版下，伸縮項目從左到右排列；“rtl”排版上伸縮項目從右向左排列。
wrap-reverse：伸縮容器多行顯示，“ltr”排版下，伸縮項目從右向左排列；“rtl”排版下，伸縮項目從左到右排列。（和wrap相反）
Flexbox詳解

5.flex-flow（flex container）

這個是“flex-direction”和“flex-wrap”屬性的縮寫版本。同時定義了伸縮容器的主軸和側軸。其預設值為“row nowrap”。

Flexbox詳解

6.justify-content（flex container）

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

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

Flexbox詳解

7.align-content（flex container）

這個屬性主要用來調準伸縮行在伸縮容器裡的對齊方式。類似于伸縮項目在主軸上使用“justify-content”一樣。

Flexbox詳解

8.align-items（flex container）

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

Flexbox詳解

9.align-self（flex items）

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

Flexbox詳解

10.flex-grow（flex items）

根據需要用來定義伸縮項目的擴充能力。它接受一個不帶機關的值做為一個比例。主要用來決定伸縮容器剩餘空間按比例應擴充多少空間。

如果所有伸縮項目的“flex-grow”設定了“1”，那麼每個伸縮項目将設定為一個大小相等的剩餘空間。如果你給其中一個伸縮項目設定了“flex-grow”值為“2”，那麼這個伸縮項目所占的剩餘空間是其他伸縮項目所占剩餘空間的兩倍。如下圖：

Flexbox詳解

11.flex-shrink（flex items）

根據需要用來定義伸縮項目收縮的能力。[注意：負值同樣生效。]

12.flex-basis（flex items）

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

如果設定為“0”，不考慮剩餘空白空間。如果設定為自動，則按照flex-grow值配置設定剩餘空白空間。如圖所示：

13.flex（flex items）

這是“flex-grow”、“flex-shrink”和“flex-basis”三個屬性的縮寫。其中第二個和第三個參數（flex-shrink、flex-basis）是可選參數。預設值為“0 1 auto”。

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

Flexbox詳解

Flexbox模型及術語

Flexbox使用示例

水準豎直居中

六個子元素布局

屬性

繼續閱讀

CSS的僞元素和僞類的差別

css僞類與僞元素差別

CSS中僞類和僞元素的差別

CSS的僞類與僞元素的差別

css中僞類與僞元素的差別

談談css的僞類和僞元素

僞類與僞元素的差別僞類與僞元素的差別

web前端布局練手項目

CSS----對字号的控制:Points, ems, pixels, 及其它機關,關鍵字,比例參數

趕工心得（一）

兩種清除浮動的方法

如何成為一名.net 工程師?

tabpanel 使用問題

CSS之折疊菜單

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”