原文合集地址如下，有需要的朋友可以關注

本文地址

合集地址

Flex布局（Flexible Box Layout）是CSS3中引入的一種強大的布局模型，它為開發(fā)人員提供了一種簡單而靈活的方式來構建現(xiàn)代網(wǎng)頁布局。本文將深入解讀Flex布局的核心概念和屬性，以及如何應用Flex布局來構建靈活的響應式布局。

什么是Flex布局

Flex布局是一種CSS布局模型，它的目標是為了解決傳統(tǒng)布局方式在構建復雜布局時的限制和不足。Flex布局的優(yōu)勢在于它提供了強大的自適應能力和靈活性，使得開發(fā)人員能夠更輕松地實現(xiàn)水平居中、垂直居中、等高列布局等復雜布局效果。

主軸與交叉軸：

Flex布局涉及到兩個主要軸線：主軸和交叉軸。主軸是Flex容器的主要方向，通常是水平方向或垂直方向。而交叉軸是垂直于主軸的軸線。 主軸由 flex-direction 定義，可以取 4 個值： row、row-reverse、column、column-reverse 如果你選擇了 row 或者 row-reverse，你的主軸將沿著 inline 方向延伸。

選擇 column 或者 column-reverse 時，你的主軸會沿著上下方向延伸 — 也就是 block 排列的方向。

Flex容器的常用屬性詳解：

• flex-direction：控制Flex項目在Flex容器中的排列方向。

• justify-content設置子元素在主軸上的對齊方式

• flex-start(默認):起點對齊

• flex-end:終點對齊

• center:居中對齊

• space-between:等間距分布,首尾貼邊

• space-around:等間距分布,首尾不貼邊

• align-items設置子元素在交叉軸上的對齊方式。

• stretch(默認):拉伸填充

• flex-start:起點對齊

• flex-end:終點對齊

• center:居中對齊

• baseline:基線對齊

• 通過align-self設置單個子元素在交叉軸上的對齊

• auto: 繼承父元素的align-items屬性,如果沒有會取默認值stretch。

• stretch: 拉伸填滿整個交叉軸的高度(默認值)。

• flex-start: 元素頂部與交叉軸的起點對齊。

• flex-end: 元素底部與交叉軸的終點對齊。

• center: 元素在交叉軸居中顯示。

• baseline: 元素的基線對齊。

• align-content：當Flex項目在交叉軸上有多余空間時，控制多行或多列的對齊方式。

#flex-grow、flex-shrink 和 flex-basis

flex-grow、flex-shrink和 flex-basis

flex-grow、flex-shrink 和 flex-basis 是 Flexbox 中非常重要的三個屬性,用來控制 flex 項目的尺寸。 它們能使我們在主軸方向上控制彈性元素的尺寸和伸縮性。 flex-grow: 定義項目的放大比例,默認為0(即存在剩余空間也不放大)。 flex-shrink: 定義項目的縮小比例,默認為1(空間不足時會縮小)。 flex-basis: 定義了在分配多余空間之前,項目占據(jù)的主軸空間,默認為auto,即項目本來大小。

1. flex-grow 屬性：

• flex-grow 屬性定義 Flex 項目在可用空間中如何放大。

• 默認值為 0，表示項目不會放大。如果項目具有flex-grow值，則會相對于其他具有更小flex-grow值的項目進行放大。

• 該屬性接受一個非負整數(shù)值。值越大，項目將在放大階段占用更多空間。

示例：

.container?{
??display:?flex;
}

.item?{
??flex-grow:?1;?/*?所有項目具有相同的?flex-grow?值，將等分可用空間?*/
??/*?flex-grow:?2;??該項目的放大優(yōu)先級高，將獲得更多的可用空間?*/
}


1. flex-shrink屬性：

• flex-shrink 屬性定義 Flex 項目在空間不足時如何縮小。

• 默認值為 1，表示項目會相對于其他具有更大 flex-shrink 值的項目進行縮小。

• 該屬性接受一個非負整數(shù)值。值越大，項目在縮小階段會占用更少的空間。

示例：

.container?{
??display:?flex;
}

.item?{
??flex-shrink:?1;?/*?所有項目具有相同的?flex-shrink?值，將等比例縮小?*/
??/*?flex-shrink:?2;?該項目的縮小優(yōu)先級高，將縮小得更多?*/
}


1. flex-basis 屬性：

• flex-basis 屬性定義了 Flex 項目在分配空間之前的基準大小。它類似于 width 或 height 屬性。

• 默認值為 auto，表示項目的原始大小不會受到影響。也可以使用像素值或百分比值來指定項目的基準大小。

• 該屬性在不考慮 flex-grow 和 flex-shrink 的情況下，確定項目在主軸上的大小。

示例：

.container?{
??display:?flex;
}

.item?{
??flex-basis:?100px;?/*?設置項目的基準大小為?100?像素?*/
??/*?flex-basis:?50%;?設置項目的基準大小為父容器寬度的一半?*/
}


綜合示例：

<div?class="container">
??<div?class="item"?style="flex-grow:?1;?flex-basis:?100px;">Item?1</div>
??<div?class="item"?style="flex-grow:?2;?flex-basis:?150px;">Item?2</div>
??<div?class="item"?style="flex-shrink:?1;?flex-basis:?200px;">Item?3</div>
</div>


在上述示例中，有三個 Flex 項目，并且分別使用了flex-grow、flex-shrink 和 flex-basis 屬性。項目 1 和項目 2 具有不同的flex-grow和 flex-basis 值，這意味著它們會在放大階段和縮小階段獲得不同的可用空間。項目 3 具有不同的flex-shrink和 flex-basis 值，這意味著它在空間不足時會相對于其他項目縮小得更多。

Flex布局的常見布局實例：

• 水平居中：使用justify-content來實現(xiàn)Flex項目在主軸上的居中對齊。

.parent{
?display:flex;
?justify-content:center;
}


• 垂直居中：使用align-items或align-self來實現(xiàn)Flex項目在交叉軸上的居中對齊。

.parent?{
??display:?flex;
??justify-content:?center;
??align-items:?center;
}


• 等高列布局：通過設置flex-grow屬性來實現(xiàn)多列等高布局。

HTML 結(jié)構：

<div?class="container">
??<div?class="column">Column?1<br>Content?of?Column?1</div>
??<div?class="column">Column?2<br>Content?of?Column?2</div>
??<div?class="column">Column?3<br>Content?of?Column?3</div>
</div>


CSS 樣式：

.container?{
??display:?flex;
}

.column?{
??flex:?1;
??padding:?20px;
??border:?1px?solid?#ccc;
}


在這個示例中，我們使用了 Flex 容器 .container 包含了三個列 .column。通過設置 .column 元素的 flex: 1; 屬性，每個列都會均分剩余空間，從而實現(xiàn)等高列布局。

• 底部固定欄：使用margin-top: auto和align-self: flex-end將底部欄固定在Flex容器的底部。 將底部固定欄放在 Flex 容器的最底部，并設置容器的屬性使其占據(jù)剩余空間。以下是一個示例：

HTML 結(jié)構：

<div?class="container">
??<div?class="content">Content?goes?here</div>
??<div?class="footer">This?is?the?fixed?footer</div>
</div>


CSS 樣式：

body,?html?{
??height:?100%;
??margin:?0;
}

.container?{
??display:?flex;
??flex-direction:?column;
??min-height:?100%;
}

.content?{
??flex:?1;
??padding:?20px;
}

.footer?{
??flex-shrink:?0;
??background-color:?#333;
??color:?#fff;
??padding:?10px;
??text-align:?center;
}


在這個示例中，我們使用 Flex 容器 .container 來容納內(nèi)容和底部固定欄。通過設置 .container 的 min-height: 100%;，使其至少占滿整個屏幕高度，即使內(nèi)容不夠長時，底部固定欄也會保持在底部。

【總結(jié)】： Flex布局是一種強大而靈活的布局模型，通過靈活控制Flex容器和Flex項目的屬性，我們可以輕松地構建復雜的響應式布局。掌握Flex布局將成為現(xiàn)代網(wǎng)頁開發(fā)的必備技能，它將帶來更好的用戶體驗和更高的開發(fā)效率。