摘要：本文記錄了我在學習前端上的筆記，方便以后的復習和鞏固。注意項目現在顯示的寬度是他們的默認寬度。各行將會伸展以占用剩余的空間。在其它情況下，剩余空間被所有行平分，擴大各行的側軸尺寸。這不會影響源代碼。不要忘記了，默認情況下，項目的值為。

本文記錄了我在學習前端上的筆記，方便以后的復習和鞏固。

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

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

效果如下圖:

默認情況下，div在css中是垂直的，如下圖:

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

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

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屬性有三個屬性值:

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-direction和flex-wrap兩個屬性的速記屬性。
就像border一樣

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

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屬性可以接受這些屬性值

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

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

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

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

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

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

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

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

stretch：各行將會伸展以占用剩余的空間。如果剩余的空間是負數，該值等效于「flex-start」。在其它情況下，剩余空間被所有行平分，擴大各行的側軸尺寸。

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

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

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

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

    
1
    
2
    
3
    
4

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

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

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

Flex項目就重新進行了排列，從低到高排列。不要忘記了，默認情況下，Flex項目2、3、4的order值為0。現在Flex項目1的order值為1

Flex項目2、3和4的order值都是0。HTML源代碼秩序并沒有修改過。如果給Flex項目2的order設置為2呢？

是的，你猜對了。它也增加堆棧。現在代表Flex項目的最高的order值。

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

值為0

值為1

看下圖會更好理解

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

注意：負數無效

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

屬性值：

.flex-item{
    flex-bassis: auto || ;
}

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

默認值: auto

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

.flex-item{
    flex: none | auto | [  ? ||  ];
}

默認值: 0 ,1, auto

使用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時將無對齊方式一說。著作權歸作者所有。

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