CSS Flexbox學習筆記

本文記錄了我在學習前端上的筆記，方便之後的複習和鞏固。

開始使用Flex

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

在父元素中的顯式的設置display:flex或者display:inline-flex

/* 聲明父元素爲flex容器 */
ul{
    display: flex; /* 或者inline-flex */
}

效果以下圖:

默認狀況下，div在css中是垂直的，以下圖:

關鍵詞：
Flex容器（Flex Container）：父元素顯式設置了display:flex
Flex項目（Flex Items）：Flex容器內的子元素

Flex容器屬性

flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content

flex-direction

flex-dirction屬性控制Flex項目沿主軸(Main Axis)的排列方向。
flex-direction屬性可讓你決定Flex項目如何排列。它能夠是行(水平)、列(垂直)或者行列相反的方向。
它具備四個值:

/* ul是一個flex容器 */
ul{
    flex-direction: row || column || row-reverse || column-reverse;
}

主軸和側軸: 主軸能夠當成當成水平方向理解，側軸則是垂直方向。Main-Axis就是水平方向，從左到右，這也是默認方向。Cross-Axis是垂直方向，從上往下。

默認狀況下，flex-direction屬性的值是row。它讓Flex項目沿着Main-Axis排列(從左到右，水平排列)

若是把flex-direction屬性的值改爲column，這時Flex項目將沿着Cross-Axis從上到下垂直排列。不在是從左到右水平排列。

若是把flex-direction屬性的值加上reverse如

ul{
    flex-direction: row-reverse;
}

以下圖:

ul{
    flex-direction: column-reverse;
}

以下圖:

flex-wrap

flex-wrap屬性有三個屬性值:

ul{
    flex-wrap: warp || nowrap || wrap-reverse;
}

flex-wrap默認屬性是nowrap。也就是說，Flex項目在Flex容器內不換行排列。

ul{
    flex-wrap: nowarp;/* Flex容器內的Flex項目不換行排列 */
}

當你但願Flex容器內的Flex項目達到必定數量時，能換行排列。當Flex容器中沒有足夠的空間放置Flex項目（Flex項目默認寬度），那麼Flex項目將會換行排列。把它（flex-wrap）的值設置爲wrap就有這種可能：

ul{
    flex-wrap: wrap;
}

如今Flex項目在Flex容器中就會多行排列。
在這種狀況下，當一行再不能包含全部列表項的默認寬度，他們就會多行排列。即便調整瀏覽器大小。
注意：Flex項目如今顯示的寬度是他們的默認寬度。也沒有必要強迫一行有多少個Flex項目。

flex-wrap還有一個值：warp-reverse它讓Flex項目在容器中多行排列，只是方向是反的

flex-flow

flex-flow是flex-direction和flex-wrap兩個屬性的速記屬性。
就像border同樣

ul{
    border:1px solid #ccc;
    flex-flow: row wrap;  /* 第一個值是flex-flow的值第二個則是flex-direvtion的值 */
}

justify-content

justify-content屬性能夠接受下面五個值之一

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

justify-content屬性主要定義了Flex項目在Main-Axis上的對齊方式。你能夠想象下text-align屬性。

各個屬性的效果如圖:

這兩個屬性值能夠一塊兒理解
flex-start讓全部Flex項目靠Main-Axis開始邊緣(左對齊)
flex-end讓全部Flex項目靠Main-Axis結束邊緣(右對齊)
center讓全部Flex項目排在Main-Axis中間（居中對齊）
space-between讓除了第一個和最一個Flex項目的二者間間距相同（兩端對齊）
space-around讓每一個Flex項目具備相同的空間。

align-items

align-items屬性能夠接受這些屬性值

ul{
    align-items: flex-start || flex-end || center || stretch || baseline
}

它主要用來控制Flex項目在Cross-Axis垂直方向的對齊方式。這也是align-items和justify-content兩個屬性之間的不一樣之處。

flex-start/baseline：伸縮項目在側軸起點邊的外邊距緊靠住該行在側軸起點的邊。
flex-end：伸縮項目在側軸終點邊的外邊距靠住該行在側軸終點的邊。
center：伸縮項目的外邊距盒在該行的側軸上居中放置。（若是伸縮行的尺寸小於伸縮項目，則伸縮項目會向兩個方向溢出相同的量）。
stretch：伸縮項目拉伸，填滿整個側軸

align-content

flex-start：各行向伸縮容器的起點位置堆疊。伸縮容器中第一行在側軸起點的邊會緊靠住伸縮容器在側軸起點的邊，以後的每一行都緊靠住前面一行。

flex-end：各行向伸縮容器的結束位置堆疊。伸縮容器中最後一行在側軸終點的邊會緊靠住該伸縮容器在側軸終點的邊，以前的每一行都緊靠住後面一行。

center：各行向伸縮容器的中間位置堆疊。各行兩兩緊靠住同時在伸縮容器中居中對齊，保持伸縮容器在側軸起點邊的內容邊和第一行之間的距離與該容器在側軸終點邊的內容邊與第最後一行之間的距離相等。（若是剩下的空間是負數，則行的堆疊會向兩個方向溢出的相等距離。）

space-between：各行在伸縮容器中平均分佈。若是剩餘的空間是負數或伸縮容器中只有一行，該值等效於「flex-start」。在其它狀況下，第一行在側軸起點的邊會緊靠住伸縮容器在側軸起點邊的內容邊，最後一行在側軸終點的邊會緊靠住伸縮容器在側軸終點的內容邊，剩餘的行在保持兩兩之間的空間相等的情況下排列。

space-around：各行在伸縮容器中平均分佈，在兩邊各有一半的空間。若是剩餘的空間是負數或伸縮容器中只有一行，該值等效於「center」。在其它狀況下，各行會在保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其餘空間的一半的情況下排列。

stretch：各行將會伸展以佔用剩餘的空間。若是剩餘的空間是負數，該值等效於「flex-start」。在其它狀況下，剩餘空間被全部行平分，擴大各行的側軸尺寸。

Flex項目屬性

order || flex-grow || flex-shrink || flex-basis
order

oredr

容許Flex項目在一個Flex容器中從新排序。基本上，你能夠改變Flex項目的順序，從一個位置移動到另外一個地方。

這不會影響源代碼。這也意味着Flex項目的位置在HTML源代碼中不須要改變。order屬性的默認值是0。它能夠接受一個正值，也能夠接受一個負值。

值得注意的是，Flex項目會根據order值從新排序。從底到高。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

默認狀況下，全部Flex項目的order值都是0。把前面給列表的樣式運用過來。看到的效果以下：

Flex項目顯示是按HTML源代碼中的順序來顯示，Flex項目一、二、3和4。

li:nth-child(1){
        order:1
    }

Flex項目就從新進行了排列，從低到高排列。不要忘記了，默認狀況下，Flex項目二、三、4的order值爲0。如今Flex項目1的order值爲1

Flex項目二、3和4的order值都是0。HTML源代碼秩序並無修改過。若是給Flex項目2的order設置爲2呢？

是的，你猜對了。它也增長堆棧。如今表明Flex項目的最高的order值。

flex-grow和flex-shrink

flex-grow和flex-shrink屬性控制Flex項目在容器有多餘的空間如何放大，在沒有額外空間又如何縮小
它們能夠接受0或大於0的任何正數

值爲0

值爲1

看下圖會更好理解

flex-shrink值爲0時他們不會縮小會保持原來的大小

注意：負數無效

flex-basis

這個屬性和width，height屬性相同，用來指定flex項目的大小

屬性值：

.flex-item{
    flex-bassis: auto || <width>;
}

flex-basis指定了第四個flex項目的初始尺寸。

默認值: auto

flex

這個屬性是flex-grow、flex-shrink和flex-basis的速寫。

.flex-item{
    flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

默認值: 0 ,1, auto

align-self

使用align-self屬性能夠指定flex項目自身的對齊方式或者使用align-items來指定單個flex項目。使用align-items對齊方式來解釋flex容器，能更好的理解他們的值。

.flex-item{
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

第三個和第四個flex項目使用align-self屬性覆蓋了其默認的對齊方式。

默認值: auto

注意： align-self取值爲auto值時，flex項目對齊方式會根據其父元素align-items來決定。若是其元素設置爲stretch值時或沒有父元素時，align-self的值爲auto時將無對齊方式一說。著做權歸做者全部。

最後，若有錯誤和疑惑請指出，多謝各位大哥