CSS Flexbox詳解

Flexbox是一個強大而靈活的佈局，本篇文章主要對其進行學習瞭解。

1、Flexbox簡介

Flexbox佈局（Flexible Box)模塊旨在提供一個更加有效的方式制定、調整和分佈一個容器裏的項目佈局，即便他們的大小是未知或者是動態的。簡單的理解，就是能夠自動調整，計算元素在容器空間中的大小，並進行有效合理的佈局。

Flexbox佈局中有兩個重要的概念：Flex容器和Flex項目。

Flex容器包含多個Flex項目，經過對Flex容器和Flex項目的具體屬性進行設置，能夠達到各類各樣靈活的佈局樣式。

Flexbox使用

Flexbox的使用很是簡單，只須要對Flex容器設置display:flex或者display:inline-flex，就能夠具體操做使用Flexbox佈局了。

下面以具體示例演示：

html代碼

<div class="container">
		<div class="wrap">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
複製代碼

css代碼

.container {
	width: 70%;
	height: 500px;
	margin:20px auto;
	border: 1px solid black;
}
.container .wrap {
	display: flex;
	border: 3px solid #a448cf;
	margin:20px;
    width:80%;
	height:80%  
}
.container .wrap div {
	width:150px;
	height:150px;
	background-color: #c75a5a;
	margin:10px;
}
複製代碼

2、Flex容器

首先介紹下Flex容器的具體屬性以及具體的使用方式。

屬性	值	含義
flex-direction	row || column || row-reverse || column-reverse	控制Flex項目沿着主軸（Main Axis）的排列方向
flex-wrap	wrap || nowrap || wrap-reverse	控制Flex項目是否換行顯示
flex-flow	row wrap|| row nowrap || column wrap || column nowrap 等	flex-direction和flex-wrap兩個屬性的組合速記屬性
justify-content	flex-start || flex-end || center || space-between || space-around	控制 Flex項目在Main-Axis上的對齊方式
align-items	flex-start || flex-end || center || stretch || baseline	控制Flex項目在Cross-Axis對齊方式
align-content	flex-start || flex-end || center || stretch	用於多行的Flex容器，控制Flex項目在Cross-Axis對齊方式

1. flex-direction

flex-direction屬性控制Flex項目沿着主軸（Main Axis）的排列方向，能夠是行（水平）、列（垂直）或者行和列的反向。

默認狀況下flex-direction的屬性值是row,具體排列方式以下：

可是當flex-direction的屬性值是column，對應的主軸就應該垂直向下。

具體應用示例以下：

2. flex-wrap

flex-wrap屬性控制Flex項目是否換行。默認狀況下，Flex容器會在一行內容納全部的Flex項目，由於flex-wrap屬性的默認值是nowrap，也就是不換行。

具體應用示例以下：

其中 wrap-reverse表示Flex項目在容器中多行排列，只是方向是反的。

3. flex-flow

flex-flow是flex-direction和flex-wrap兩個屬性的速記屬性。

具體再也不解釋，看下面示例便可：

4. justify-content

justify-content屬性，控制Flex項目在整個Main-Axis上的對齊方式。

justify-content的默認屬性值是flex-start。

space-between讓flex項目兩端對齊。

space-around讓每一個flex項目具備相同的空間

5. align-items

align-items控制Flex項目在Cross-Axis對齊方式。

align-items的默認值是stretch，讓全部的Flex項目高度和Flex容器高度同樣，鋪展開。

baseline讓全部flex項目在Cross-Axis上沿着他們本身的基線對齊。

其中stretch和baseline在不設置具體高度值，纔會如上表現，不然會顯示固定的高度。

align-content屬性與align-items做用相同，不過該屬性只針對多行，對單行無效。

3、Flex項目

接下來繼續介紹Flex項目的具體屬性及使用方法。

屬性	值	含義
order	數值	根據order值從新排序。從底到高。
flex-grow	0 || positive number	控制Flex項目在容器有多餘的空間如何放大
flex-shrink	0 || positive number	控制Flex項目在容器 沒有額外空間又如何縮小
flex-basis	auto || % || em || rem || px	指定Flex項目的初始大小
align-self	auto || flex-start || flex-end || center || baseline || stretch	控制單個Flex項目在Cross-Axis對齊方式

1. order

order容許Flex項目在一個Flex容器中從新排序，屬性默認值是0。

依據order值的大小進行排序，按照值從低到高依次排序。

默認狀況下，排序以下：

當將方塊1設置 order:1後，排序以下：

若是，多個Flex項目具備相同的order值，Flex項目從新排序是基於HTML源文件的位置進行排序。

以下所示，將方塊1和方塊2都設置爲order:1。

2. flex-grow 和 flex-shrink

flex-grow和flex-shrink屬性控制Flex項目在容器有多餘的空間如何放大（擴展），在沒有額外空間又如何縮小。

flex-grow和flex-shrink 的值能夠爲 0或者大於0的任何正數。

默認狀況下，flex-grow屬性值設置爲0，表示Flex項目不會增加，填充Flex容器可用空間。

默認狀況下，flex-shrink屬性值設置爲1，表示Flex項目會縮小，適應屏幕寬度。

若是把flex-grow的值設置爲1，以下所示：

當多個flex項目在一行內，即不換行時，設置不一樣的flex-grow和flex-shrink 值，對應的空間分配也不一樣。

flex-grow

將每個item所設置的 grow 所有加起來，得到可用空間，而後除以總的grow值，獲得單位分配空間。

根據每個item 設置的 grow 來算，若是一個item 的grow 爲 6，那麼 這個 item 在主軸上的尺寸就須要延伸 6*單位分配空間的大小。

flex-shrink

先將全部項目 按照 flex-shrink * item-size 的方式加起來 獲得一個加權和，而後計算出 每一份 item 的 shrink比例: shrink比例 = flex-shrink * item-size / 以前的總和。最後每個item 減去這個 shrink比例 * 負可用空間。

在flex項目有min-width(height)和max-width(height)時，對應的項目要考慮上下限值，把剩餘的伸縮值分配給其餘項目。

3. flex-basis

flex-basis指定了 flex 元素在主軸方向上的初始大小，即決定了 flex項目內容的寬或者高（取決於主軸的方向）的尺寸大小。

默認狀況，Flex項目的初始寬度由flex-basis的默認值決定，即：flex-basis: auto。Flex項目寬度的計算是基於內容的多少來自動計算。

flex-basis和width/height有必定的優先級，具體規則以下：

• flex-basis 的優先級比 width/height 非auto高
• width/height auto優先級等於 flex-basis，取二者中的最大值。

4. align-self

align-self 控制單個項目沿着Cross-Axis的對其方式。

除了auto以外，上述示例中flex容器設置了align-itmes：center。

auto 是將目標flex項目的值設置爲父元素的 align-items值，或者若是該元素沒有父元素的話，就設置爲 stretch。上述示例中align-items：stretch。

4、總結

以上是對flexbox的總體介紹，能夠看出其強大與靈活。除此以外，flexbox還有不少其餘的特性以及問題，這裏就再也不介紹，建議看如下兩篇文章，寫的很好，本文也主要參考了這兩篇文章。

理解Flexbox：你須要知道的一切

深刻理解 flex 佈局以及計算

若是想實踐一下對flexbox的掌握，能夠試着作百度前端技術學院中的這個做業。