Flex知識小結

時間 2019-11-08

標籤 flex 知識小結欄目 Flex 简体版

原文原文鏈接

簡介

flex佈局是一種彈性佈局，也能夠把它理解爲一種格式，使用了display:flex的div具備某種總體特質，就像word的格式刷，你刷了某種格式以後，相應的文檔段落就具備了相同的特質：相同的字體樣式、相同的字體大小、相同的行間距、相同的。。。flex佈局也是這樣，使用了display:flex的div稱爲flex容器，緊挨着該容器的子元素稱爲項目，這些項目的排列方式具備總體特質：排列方向、換行方式、每行的排列方式。。。是用flex的7個屬性設置的。下圖的框框是flex容器：css

flex 容器默認存在兩根軸，主軸和交叉軸，主軸是項目的排列方向，主軸肯定以後，它90度的方向爲交叉軸。默認狀況，主軸是水平（row）的，也就是沿着水平方向排布的。當設置flex-direction:column時，主軸沿着垂直方向。當flex-direction含有reverse時，start和end交換位置。html

Flex佈局一共有7個樣式屬性，設置在flex容器上，分別是：面試

flex-direction: row | row-reverse | column |column-reverse
flex-wrap: nowrap| wrap | wrap-reverse
flex-flow: row wrap| ...
justify-content: flex-start | flex-end | center | space-between | space-around
align-items: flex-start | flex-end | center | baseline | stretch
align-content: flex-start | flex-end | center | space-between | space-around
複製代碼

1. flex-direction

決定主軸的方向（即項目的排列方向），項目沿着主軸依次排列。bash

默認爲row（水平軸），設置爲column則爲垂直軸，當有reverse時，主軸起點和終點交換位置。佈局

row（默認值）：主軸爲水平方向，起點在左端。
row-reverse：主軸爲水平方向，起點在右端。
column：主軸爲垂直方向，起點在上沿。
column-reverse：主軸爲垂直方向，起點在下沿。

對於下面的例子：字體

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
        ul{   
            display: flex;   
            flex-direction: row;  
        }
        
        ul>li{
            width:100px;
            height:50px;
            background:#ffff00;
            border:1px red solid;
            display: inline-block;   
        }
	</style>
</head>
<body>
    <ul>    	
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

複製代碼

1）`row 默認`

從左邊向右依次排開（截圖中紅色框指空白部分）。 flex

2）`row-reverse`

從右邊向左依次排開。 ui

3）`column`

從上邊向下依次排開。 flexbox

4）`column-reverse`

從下邊向上依次排開。 spa

2. flex-wrap

項目默認都排在主軸上，若是一行排不下，如何換行？可用flex-wrap屬性設置。

nowrap：不換行
wrap：換行，第一行在上方
wrap-reverse：換行，第一行在下方

1）`nowrap`

每一個項目依次排開不換行（每一個項目寬度固定時，按照寬度依次放置，若是項目過寬一行放不下，且內部元素不會撐開容器時，會致使壓縮，若是內部元素撐開容器會出現滾動條，若是上個例子li的寬度改成600px，實際只有400++px ，壓縮緣由參考7.flex屬性）。

2）`wrap`

依次排開，一行不夠換行展現。

flex-wrap:wrap相似浮動float（當flex-direction爲row-reverse時，相似float:right）。
與浮動有一點不一樣，flex佈局每一行高度都是一行全部項目中最高項目的高度，即每一行高度一致，就像給每一行嵌套一個div，這個div嵌套的項目個數取決於設備，多麼厲害的佈局，這種佈局防止頁面錯亂。
而float每一個項目高度不一樣，可能會致使頁面錯亂。根據float的定義，咱們知道，它是浮在頁面上方，換行時可能不是從頁面最左側開始排列，這取決於上一行最右邊項目的高度和寬度等，而flex佈局換行都是從最左側排列。

下面用一個示例解釋這個問題，把第1個項目高度改成60px（其餘都是50px）。

flex佈局示例：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
        ul{   
            display: flex;   
            flex-direction: row;  
        }
        
        ul>li{
            width:100px;
            height:50px;
            background:#ffff00;
            border:1px red solid;
            display: inline-block;   
        }
        ul>li:first-child{
             height: 60px;
        }
	</style>
</head>
<body>
    <ul>    	
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>
複製代碼

float佈局示例：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		ul>li{
			float: left;
		    width:400px;
		    height:50px;
		    background:#ffff00;
		    border:1px red solid;
		    display: inline-block;   
		}
		ul>li:first-child{
			height: 60px;
		}
	</style>
</head>
<body>
	<ul>    	
		<li>1</li>	    
		<li>2</li>	    
		<li>3</li>	    
		<li>4</li>  
		<li>5</li>   
	</ul>
</body>
</html>
複製代碼

跟float的區別在下面兩個圖中能夠看出來，flex的項目4在1下方，而float的項目4貼在2的下面。若是把項目1高度改成20px，二者沒有差異。

3）`wrap-reverse`

這個更厲害了，換行且第一行在最下面。個人理解是這樣，咱們往地上一點點放盒子（這些盒子高度可能不一樣），一行放滿以後放一個擋板，在上面繼續放盒子，而flex-wrap:wrap是從上面放，一行放不下時，放個擋板，第二行繼續放。

3. flex-flow

flex-flow屬性就是flex-direction和flex-wrap的簡寫形式，默認值爲row nowrap。再也不多解釋。

.box {
    flex-flow:row-reverse wrap;
}
複製代碼

4. justify-content

justify-content 定義了項目在主軸上的對齊方式，即每一行的排布方式，當每一個項目寬度都不相同時設置項目間隔和總體位置。

flex-start（默認）：左對齊
flex-end：右對齊
center：居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

1）`flex-start 默認`

左對齊（默認）。

2）`flex-end`

右對齊。

3）`center`

居中。

4）`space-between`

兩端對齊，項目之間的間隔都相等。項目與邊框無間距。

5）`space-around`

每一個項目兩側的間隔相等。項目之間的間隔比項目與邊框的間隔大一倍。

5. align-items

align-items屬性定義項目在交叉軸上如何對齊，即每一行項目高度不一樣時設置該屬性改變佈局。

flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

1）`flex-start`

交叉軸的起點對齊（在本例中是上對齊）。

2）`flex-end`

交叉軸的終點對齊（在本例中是下對齊）。

3）`center`

交叉軸的中點對齊（居中,面試垂直居中的一種方法）。

4）`baseline`

項目的第一行文字的基線對齊，本例給項目2增長padding-top，以下圖，文字1/2/3對齊。

5）`stretch 默認值`

若是項目未設置高度或設爲auto，將佔滿整個容器的高度，咱們試圖把項目3設置height:auto，以下圖，它會撐滿整個高度，這個也十分有用。

6. align-content

定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。align-content相似justify-content，只不過justify-content定義主軸對齊方式，而align-content是定義交叉軸的對齊方式。

The align-items property will align the items on the cross axis.
複製代碼

flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線佔滿整個交叉軸。

下面全部示例把flex容器高度改成300px，結合上面說到的justify-content的示例，便可明白：

1）`flex-start`

與交叉軸的起點對齊。

2）`flex-end`

與交叉軸的終點對齊。

3）`center`

與交叉軸的中點對齊。

4）`space-between`

與交叉軸兩端對齊，軸線之間的間隔平均分佈。

5）`space-around`

每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。

6）`stretch 默認`

軸線佔滿整個交叉軸。這個暫時沒想到好的例子說明。

7. flex

設置flex屬性，會根據屬性的比例進行劃分。

佈局空白 available space,這幾個 flex 屬性的做用其實就是改變了 flex 容器中的佈局空白的行爲。

Where the flex-grow property deals with adding space in the main axis,
the flex-shrink property controls how it is taken away.

If we do not have enough space in the container to lay out our items and 
flex-shrink is set to a positive integer the item can become smaller than the flex-basis.
複製代碼

包含三個屬性：flex-grow flex-shrink flex-basis

flwx-basis定義了該元素的佈局空白（available space）的基準值。
flex-grow 若被賦值爲一個正整數， flex 元素會以 flex-basis 爲基礎，沿主軸方向增加尺寸。
flex-shrink若被賦值爲一個正整數， flex 元素會以 flex-basis 爲基礎，沿主軸方向jians尺寸。

flex預約義值：

flex: initial  =  flex：0 1 auto
flex: auto  =  flex:1 1 auto
flex: none  =  flex: 0 0 auto
flex: <positive-number>
複製代碼

flex詳解：www.w3.org/TR/2017/CR-…

其餘

設爲 Flex 佈局之後，子元素的 float、clear 和 vertical-align 屬性將失效。
主軸的方向不必定是水平的，這個屬性就是設置主軸的方向，主軸默認是水平方向，從左至右，若是主軸方向設置完畢，那麼交叉軸就不須要設置，交叉軸永遠是主軸順時針旋轉 90°。

相關標籤/搜索

每日一句

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

Flex知識小結

簡介

1. flex-direction

1）row 默認

2）row-reverse

3）column

4）column-reverse

2. flex-wrap

1）nowrap

2）wrap

3）wrap-reverse

3. flex-flow

4. justify-content

1）flex-start 默認

2）flex-end

3）center

4）space-between

5）space-around

5. align-items

1）flex-start

2）flex-end

3）center

4）baseline

5）stretch 默認值

6. align-content

1）flex-start

2）flex-end

3）center

4）space-between

5）space-around

6）stretch 默認

7. flex

其餘

1）`row 默認`

2）`row-reverse`

3）`column`

4）`column-reverse`

1）`nowrap`

2）`wrap`

3）`wrap-reverse`

1）`flex-start 默認`

2）`flex-end`

3）`center`

4）`space-between`

5）`space-around`

1）`flex-start`

2）`flex-end`

3）`center`

4）`baseline`

5）`stretch 默認值`

1）`flex-start`

2）`flex-end`

3）`center`

4）`space-between`

5）`space-around`

6）`stretch 默認`