??????更多知識，歡迎訪問我的個人博客：Nan-ying’s Blog

一、認(rèn)識 flex 布局

長久以來，CSS 布局中唯一可靠且跨瀏覽器兼容的布局工具只有 floats 和 positioning。 但是這兩種方法本身存在很大的局限性, 并且他們用于布局實(shí)在是無奈之舉。

一些布局上的痛點(diǎn)無法解決：

• 比如在父內(nèi)容里面垂直居中一個塊內(nèi)容
• 比如使容器的所有子項(xiàng)等分可用寬度/高度，而不管有多少寬度/高度可用
• 比如使多列布局中的所有列采用相同的高度，即使它們包含的內(nèi)容量不同

1. flex 布局的重要概念

兩個重要的概念：

• 開啟了 flex 布局的元素叫 flex container
• flex container 里面的直接子元素叫做 flex item

使元素成為 flex container：

• display: flex： flex container 以 block-level 形式存在（常用）
• display: inline-flex： flex container 以 inline-level 形式存在

flex item元素具有以下特點(diǎn)：

• flex item的布局將受flex container屬性的設(shè)置來進(jìn)行控制和布局
• flex item不再嚴(yán)格區(qū)分塊級元素和行內(nèi)級元素
• flex item默認(rèn)情況下是包裹內(nèi)容的, 但是可以設(shè)置寬度和高度

二、flex 相關(guān)屬性

屬性分為兩類：

1. flex container 中的屬性

1.1 flex-direction：item 的排布方向

flex items 默認(rèn)都是沿著 main axis（主軸）從 main start 開始往 main end 方向排布

flex-direction 決定了 main axis 的方向，有 4 個取值：

• row（默認(rèn)值）
• row-reverse
• column
• column-reverse

1.2 flex-wrap：排布是否換行

flex-wrap 決定了 flex container 是單行還是多行：

• nowrap（默認(rèn)）：單行
• wrap：多行
• wrap-reverse：多行（對比 wrap，cross start 與 cross end 相反）

注意：
flex-wrap 取默認(rèn)值時，若一行放不下所有的item元素，則會等比例壓縮每個item的寬度，不會換行

1.3 flex-flow：屬性的合并寫法

flex-flow 屬性是 flex-direction 和 flex-wrap 的簡寫，順序任何

flex-flow: row-reverse wrap-reverse

1.4 justify-content：item 的水平對齊方式

justify-content 決定了 flex items 在 main axis 上的對齊方式：

• flex-start（默認(rèn)值）：與 main start 對齊
• flex-end：與 main end 對齊
• center：居中對齊
• space-between：
  • flex items 之間的距離相等
  • 與 main start、main end兩端對齊
• space-around：
  • flex items 之間的距離相等
  • flex items 與 main start、main end 之間的距離是 flex items 之間距離的一半
• space-evenly：
  • flex items 之間的距離相等
  • flex items 與 main start、main end 之間的距離等于 flex items 之間的距離

1.5 align-item：item 的垂直對齊方式

align-items 決定了 flex items 在 cross axis 上的對齊方式：

• normal：在彈性布局中，效果和stretch一樣
• flex-start：與 cross start 對齊
• flex-end：與 cross end 對齊
• center：居中對齊
• stretch：當(dāng) flex items 在 cross axis 方向的 size 為 auto 時（未定義高度），會自動拉伸至填充 flex container
• baseline：與文字的基準(zhǔn)線對齊

1.6 align-content：多行 item 的垂直對齊方式

align-content 決定了多行 flex items 在 cross axis 上的對齊方式：

• stretch（默認(rèn)值）：與 align-items 的 stretch 類似
• flex-start：與 cross start 對齊
• flex-end：與 cross end 對齊
• center：居中對齊
• space-between：
  • flex items 之間的距離相等
  • 與 cross start、cross end兩端對齊
• space-around：
  • flex items 之間的距離相等
  • flex items 與 cross start、cross end 之間的距離是 flex items 之間距離的一半
• space-evenly：
  • flex items 之間的距離相等
  • flex items 與 cross start、cross end 之間的距離等于 flex items 之間的距離

2. flex-item 中的屬性

2.1 order：item 的排布順序

order 決定了 flex items 的排布順序：

• 可以設(shè)置任意整數(shù)（正整數(shù)、負(fù)整數(shù)、0），值越小就越排在前面
• 默認(rèn)值是 0

2.2 align-self：覆蓋 align-items 設(shè)置的垂直對齊方式

通過 align-self 覆蓋 flex container 設(shè)置的 align-items：

• auto（默認(rèn)值）：遵從 flex container 的 align-items 設(shè)置
• stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

2.3 flex-grow：item 如何拉伸

flex-grow 決定了 flex items 如何擴(kuò)展(拉伸/成長) ：

• 可以設(shè)置任意非負(fù)數(shù)字（正小數(shù)、正整數(shù)、0），默認(rèn)值是 0
• 當(dāng) flex container 在 main axis 方向上有剩余 size 時，flex-grow 屬性才會有效

注意：

• 如果所有 flex items 的 flex-grow 總和 sum 超過 1，每個 flex item 擴(kuò)展的 size = flex container的剩余size * (flex-grow / sum)
• items 擴(kuò)展后的最終 size 不能超過 max-width\max-height

2.4 flex-shrink：item 如何收縮

flex-shrink 決定了 flex items 如何收縮(縮小)：

• 可以設(shè)置任意非負(fù)數(shù)字（正小數(shù)、正整數(shù)、0），默認(rèn)值是 1
• 當(dāng) flex items 在 main axis 方向上超過了 flex container 的 size，flex-shrink 屬性才會有效

注意：

• 如果所有 flex items 的 flex-shrink 總和超過 1，每個 flex item 收縮的 size = items超出flex container的size * (收縮比例 / 所有flex items的收縮比例之和)
• flex items 收縮后的最終 size 不能小于 min-width\min-height

2.5 flex-basis：設(shè)置 items 的 base size

flex-basis 用來設(shè)置 flex items 在 main axis 方向上的 base size：

• auto（默認(rèn)值）、具體的寬度數(shù)值（100px）
• 若item中某個英文單詞超出flex-basis寬度（中文不會出現(xiàn)此種情況），可以自動顯示完全，若設(shè)置的是width則不可

決定 flex items 最終 base size 的因素，從優(yōu)先級高到低：

• max-width\max-height\min-width\min-height
• flex-basis
• width\height
• 內(nèi)容本身的 size

2.6 flex 屬性：屬性的合并寫法

flex 是 flex-grow || flex-shrink || flex-basis 的簡寫，flex 屬性可以指定1個、2個或3個值。

單值：

• 一個無單位數(shù)(number): 它會被當(dāng)作 flex-grow 的值。
• 一個有效的寬度(width)值: 它會被當(dāng)作 flex-basis 的值。
• 關(guān)鍵字none，auto或initial

雙值：

• 第一個值必須為一個無單位數(shù)，并且它會被當(dāng)作 flex-grow 的值
• 第二個值必須為以下之一：
  • 一個無單位數(shù)：它會被當(dāng)作 flex-shrink 的值
  • 一個有效的寬度值: 它會被當(dāng)作 flex-basis 的值

三值：

• 第一個值必須為一個無單位數(shù)，并且它會被當(dāng)作 flex-grow 的值。
• 第二個值必須為一個無單位數(shù)，并且它會被當(dāng)作 flex-shrink 的值。
• 第三個值必須為一個有效的寬度值， 并且它會被當(dāng)作 flex-basis 的值

三、一個布局思考

在日常應(yīng)用布局中，經(jīng)常會出現(xiàn)item個數(shù)未知的情況。此時布局會出現(xiàn)下列情況：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.container {
				width: 500px;
				background-color: orange;
				
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
			
			.item {
				width: 110px;
				height: 140px;
			}
			.container > i {
				/* 只能設(shè)置寬度，不能設(shè)置高度，這樣i的數(shù)量超出時也不會影響布局 */
				width: 110px;
			}
		</style>
	</head>
	
	<body>
		<div class="container">
			<div class="item item1">1</div>
			<div class="item item2">2</div>
			<div class="item item3">3</div>
			<div class="item item1">1</div>
			<div class="item item2">2</div>
			<div class="item item3">3</div>
			<div class="item item1">1</div>
			<div class="item item2">2</div>
			<div class="item item3">3</div>
			<div class="item item3">3</div>
			<div class="item item3">3</div>
			<!-- 添加i的個數(shù)是列數(shù)減-2 -->
			<i></i><i></i>
		</div>
		
		<script src="./js/itemRandomColor.js"></script>
	</body>
</html>

item 多出1個的時候，布局仍是正常的；只有item大于等于2個時，才會出現(xiàn)分散的分布，需要i進(jìn)行補(bǔ)齊。因此添加i的個數(shù)是列數(shù)減-2

文章來源地址http://www.zghlxwxcb.cn/news/detail-724501.html

到了這里，關(guān)于前端知識——css 之 flex 布局的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！