Flexbox詳解

時間 2019-11-09

標籤 flexbox 詳解欄目 Flex 简体版

原文原文鏈接

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)css

以上爲W3C對flexbox的部分解釋，大概就是說flexbox的出現是爲了解決複雜的web佈局，由於這種佈局方式很靈活。容器的子元素能夠任意方向進行排列。此屬性目前處於非正式標準，如下是各瀏覽器對flexbox的支持程度，在較新的瀏覽器中基本可使用該屬性。
html

Flexbox模型及術語

flex佈局模型不一樣於塊和內聯模型佈局，塊和內聯模型的佈局計算依賴於塊和內聯的流方向，而flex佈局依賴於flex directions.簡單的說：Flexbox是佈局模塊，而不是一個簡單的屬性，它包含父元素(flex container)和子元素(flex items)的屬性。css3

主軸、主軸方向(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實現是最爲簡單的。web

<!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: 0;
    margin: 0;
}

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

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

在Flex容器中，當項目邊距設置爲「auto」時，設置自動的垂直邊距將使該項目徹底集中兩個軸。瀏覽器

六個子元素佈局

再看一個例子，將子元素的數量增長到六個。六個子元素隨着瀏覽器大小改變佈局而不須要用媒體查詢。ide

<!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>

body{
    margin: 0;
    padding: 0;
}

ul {
    margin: 0;
    padding: 0;

}

li{
    list-style: none;
}

.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: 5px;
    width: 200px;
    height: 150px;
    margin-top: 10px;

    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}

效果以下：
佈局

實現圖中效果，須要設置三個屬性：flex-direction: row; flex-wrap: wrap; justify-content: space-around;下節將介紹各屬性。flex

屬性

1.display（flex container）ui

display: other values | flex | inline-flex;

2.flex-direction（flex container）this

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

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

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

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

order: <integer>

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

flex-wrap: nowrap | wrap | wrap-reverse

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

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

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

div { flex-flow: row; }/* Initial value. Main-axis is inline, no wrap. */

div { flex-flow: row-reverse wrap-reverse; }/* Main-axis is the opposite of inline direction(right to left). New lines wrap upwards. */

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

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

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

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

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

8.align-items（flex container）

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

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

9.align-self（flex items）
用來在單獨的伸縮項目上覆寫默認的對齊方式。

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

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

flex-grow: <number>; /* default 0 */

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

11.flex-shrink（flex items）
根據須要用來定義伸縮項目收縮的能力。[注意：負值一樣生效。]

flex-shrink: <number>; /* default 1 */

12.flex-basis（flex items）
這個用來設置伸縮基準值，剩餘的空間按比率進行伸縮。

flex-basis: <length> | auto; /* default auto */

若是設置爲「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'> ]

其餘資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。