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

本文記錄了我在學(xué)習(xí)前端上的筆記，方便以后的復(fù)習(xí)和鞏固。

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

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

效果如下圖:

默認(rèn)情況下，div在css中是垂直的，如下圖:

關(guān)鍵詞：
Flex容器（Flex Container）：父元素顯式設(shè)置了display:flex
Flex項(xiàng)目（Flex Items）：Flex容器內(nèi)的子元素

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

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

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

主軸和側(cè)軸: 主軸可以當(dāng)成當(dāng)成水平方向理解，側(cè)軸則是垂直方向。Main-Axis就是水平方向，從左到右，這也是默認(rèn)方向。Cross-Axis是垂直方向，從上往下。

默認(rèn)情況下，flex-direction屬性的值是row。它讓Flex項(xiàng)目沿著Main-Axis排列(從左到右，水平排列)

如果把flex-direction屬性的值改成column，這時(shí)Flex項(xiàng)目將沿著Cross-Axis從上到下垂直排列。不在是從左到右水平排列。

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

ul{
    flex-direction: row-reverse;
}

如下圖:

ul{
    flex-direction: column-reverse;
}

如下圖:

flex-wrap屬性有三個(gè)屬性值:

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

flex-wrap默認(rèn)屬性是nowrap。也就是說，F(xiàn)lex項(xiàng)目在Flex容器內(nèi)不換行排列。

ul{
    flex-wrap: nowarp;/* Flex容器內(nèi)的Flex項(xiàng)目不換行排列 */
}

當(dāng)你希望Flex容器內(nèi)的Flex項(xiàng)目達(dá)到一定數(shù)量時(shí)，能換行排列。當(dāng)Flex容器中沒有足夠的空間放置Flex項(xiàng)目（Flex項(xiàng)目默認(rèn)寬度），那么Flex項(xiàng)目將會(huì)換行排列。把它（flex-wrap）的值設(shè)置為wrap就有這種可能：

ul{
    flex-wrap: wrap;
}

現(xiàn)在Flex項(xiàng)目在Flex容器中就會(huì)多行排列。
在這種情況下，當(dāng)一行再不能包含所有列表項(xiàng)的默認(rèn)寬度，他們就會(huì)多行排列。即使調(diào)整瀏覽器大小。
注意：Flex項(xiàng)目現(xiàn)在顯示的寬度是他們的默認(rèn)寬度。也沒有必要強(qiáng)迫一行有多少個(gè)Flex項(xiàng)目。

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

flex-flow是flex-direction和flex-wrap兩個(gè)屬性的速記屬性。
就像border一樣

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

justify-content屬性可以接受下面五個(gè)值之一

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

justify-content屬性主要定義了Flex項(xiàng)目在Main-Axis上的對(duì)齊方式。你可以想象下text-align屬性。

各個(gè)屬性的效果如圖:

這兩個(gè)屬性值可以一起理解
flex-start讓所有Flex項(xiàng)目靠Main-Axis開始邊緣(左對(duì)齊)
flex-end讓所有Flex項(xiàng)目靠Main-Axis結(jié)束邊緣(右對(duì)齊)
center讓所有Flex項(xiàng)目排在Main-Axis中間（居中對(duì)齊）
space-between讓除了第一個(gè)和最一個(gè)Flex項(xiàng)目的兩者間間距相同（兩端對(duì)齊）
space-around讓每個(gè)Flex項(xiàng)目具有相同的空間。

align-items屬性可以接受這些屬性值

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

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

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

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

flex-end：各行向伸縮容器的結(jié)束位置堆疊。伸縮容器中最后一行在側(cè)軸終點(diǎn)的邊會(huì)緊靠住該伸縮容器在側(cè)軸終點(diǎn)的邊，之前的每一行都緊靠住后面一行。

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

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

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

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

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

允許Flex項(xiàng)目在一個(gè)Flex容器中重新排序?；旧希憧梢愿淖僃lex項(xiàng)目的順序，從一個(gè)位置移動(dòng)到另一個(gè)地方。

這不會(huì)影響源代碼。這也意味著Flex項(xiàng)目的位置在HTML源代碼中不需要改變。order屬性的默認(rèn)值是0。它可以接受一個(gè)正值，也可以接受一個(gè)負(fù)值。

值得注意的是，F(xiàn)lex項(xiàng)目會(huì)根據(jù)order值重新排序。從底到高。

    
1
    
2
    
3
    
4

默認(rèn)情況下，所有Flex項(xiàng)目的order值都是0。把前面給列表的樣式運(yùn)用過來。看到的效果如下：

Flex項(xiàng)目顯示是按HTML源代碼中的順序來顯示，F(xiàn)lex項(xiàng)目1、2、3和4。

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

Flex項(xiàng)目就重新進(jìn)行了排列，從低到高排列。不要忘記了，默認(rèn)情況下，F(xiàn)lex項(xiàng)目2、3、4的order值為0?，F(xiàn)在Flex項(xiàng)目1的order值為1

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

是的，你猜對(duì)了。它也增加堆?！，F(xiàn)在代表Flex項(xiàng)目的最高的order值。

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

值為0

值為1

看下圖會(huì)更好理解

flex-shrink值為0時(shí)他們不會(huì)縮小會(huì)保持原來的大小

注意：負(fù)數(shù)無效

這個(gè)屬性和width，height屬性相同，用來指定flex項(xiàng)目的大小

屬性值：

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

flex-basis指定了第四個(gè)flex項(xiàng)目的初始尺寸。

默認(rèn)值: auto

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

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

默認(rèn)值: 0 ,1, auto

使用align-self屬性可以指定flex項(xiàng)目自身的對(duì)齊方式或者使用align-items來指定單個(gè)flex項(xiàng)目。使用align-items對(duì)齊方式來解釋flex容器，能更好的理解他們的值。

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

第三個(gè)和第四個(gè)flex項(xiàng)目使用align-self屬性覆蓋了其默認(rèn)的對(duì)齊方式。

默認(rèn)值: auto

注意： align-self取值為auto值時(shí)，flex項(xiàng)目對(duì)齊方式會(huì)根據(jù)其父元素align-items來決定。如果其元素設(shè)置為stretch值時(shí)或沒有父元素時(shí)，align-self的值為auto時(shí)將無對(duì)齊方式一說。著作權(quán)歸作者所有。

最后，如有錯(cuò)誤和疑惑請(qǐng)指出，多謝各位大哥