建設(shè)網(wǎng)站設(shè)備預(yù)算如何制作網(wǎng)站二維碼
前言
本文收錄于CSS系列文章中，歡迎閱讀指正
接著上篇布局文章繼續(xù)介紹當(dāng)前流行的布局方式
Flexbox布局
長久以來，CSS 布局中唯一可靠且跨瀏覽器兼容的創(chuàng)建工具只有floats和positioning。這兩個工具大部分情況下都很好使，但是在某些方面它們具有一定的局限性，讓人難以完成任務(wù)，于是就有了Flexbox布局
?
Flexbox，也稱為彈性盒子布局，是一種CSS3的布局方式，它提供了一種更加有效的方式來布置、對齊和分散容器內(nèi)的項，即使它們的尺寸是未知或是動態(tài)的。Flexbox布局主要目的是提供一個更加靈活的布局機制，特別是當(dāng)涉及到動態(tài)或未知大小的布局時。上圖可以看到Flexbox的屬性分為兩類，一種是設(shè)置在父元素上的container（容器）屬性，另一類是設(shè)置在子元素中的item（項目）屬性，其中容器屬性影響所有子元素（即flex item）的布局方式；項目屬性主要影響子元素本身在Flex容器（container）中的行為和排列
特點
- 靈活性：Flex容器的子元素能夠根據(jù)可用空間自動伸縮。它們可以根據(jù)需要擴展以占據(jù)可用空間，或收縮以防止溢出。
- 簡潔的對齊和分布：Flexbox提供了多種對齊選項，可以輕松地在水平和垂直方向上對齊項目，例如align-items,align-content,justify-content等屬性。
- 方向獨立性：與傳統(tǒng)布局不同，在Flexbox中，可以很容易地更改布局的方向，通過修改flex-direction屬性的值，可以在行或列方向上排布子元素。
- 源順序獨立：項目的視覺順序可以獨立于它們在源代碼中的順序。
不足
-
瀏覽器的兼容性問題：雖然大多數(shù)現(xiàn)代瀏覽器都支持Flexbox，但在某些較老版本的瀏覽器或者特定的瀏覽器中可能存在兼容性問題。
-
復(fù)雜性：對于初學(xué)者來說，Flexbox的概念和屬性可能相對復(fù)雜，需要一定的時間學(xué)習(xí)掌握。
容器屬性
容器屬性指的是設(shè)置在父元素中的屬性
display
這個屬性決定了一個元素是否應(yīng)該成為一個Flex容器。它有兩個值：flex或者inline-flex。
- flex：使得元素成為塊級Flex容器。
- inline-flex：使得元素成為行內(nèi)Flex容器。
flex-direction
這個屬性決定了主軸的方向，即：Flex項目的排列方向。
- row(默認(rèn)值)：主軸為水平方向，起點在左端。
- row-reverse：主軸為水平方向，起點在右端。
- column：主軸為垂直方向，起點在上沿。
- column-reverse：主軸為垂直方向，起點在下沿。
flex-wrap
當(dāng)Flex項目一行放不開時，這個屬性決定了項目是否換行及換行的方式。
- nowrap(默認(rèn)值)：不換行，所有項目都擠在一行里。
- wrap：換行，第一行在上方。
- wrap-reverse：換行，第一行在下方。
justify-content
定義了項目在主軸上的對齊方式。
- flex-start (默認(rèn)值)：項目位于容器的起始位置。
- flex-end：項目位于容器的結(jié)束位置。
- center：項目位于容器中心。
- space-between：項目在主軸線均勻分布，第一個項目在起始位置，最后一個項目在結(jié)束位置。
- space-around：項目平均分布在行里，周圍留有空白。
- space-evenly：所有項目和容器邊緣之間的距離都相等。
align-items
這個屬性定義了項目在交叉軸上如何對齊。
- stretch (默認(rèn)值)：如果項目未設(shè)置高度或設(shè)置為auto，將占滿整個容器的高度。
- flex-start：項目位于交叉軸的起點。
- flex-end：項目位于交叉軸的終點。
- center：項目位于交叉軸的中點。
- baseline：項目的第一行文字的基線對齊。
align-content
當(dāng)存在多行時，這個屬性用來對齊整個Flex容器中的Flex項目。此屬性對單行Flex容器沒有效果。
- stretch (默認(rèn)值)：行將占滿交叉軸的剩余空間。
- flex-start：行緊靠交叉軸的起點。
- flex-end：行緊靠交叉軸的終點。
- center：行位于交叉軸的中心。
- space-between：行在交叉軸上均勻分布。
- space-around：行在交叉軸上均勻分布，兩邊留有空間。
- space-evenly：行在交叉軸上均勻分布，包括與容器邊緣。
項目屬性
項目屬性也就是容器中子元素的屬性
flex-grow
這個屬性定義了Flex項目在必要的情況下能否放大來填充父容器的剩余空間。它接受一個無單位的數(shù)值，這個數(shù)值代表了放大的比例。默認(rèn)值為0，意味著項目不會放大。如果所有項目的flex-grow屬性值都為1，那么它們將會等分剩余空間。如果某個項目的flex-grow值大于1，那么這個項目將相對于其他項占有更多的剩余空間。
flex-shrink
與flex-grow相對，這個屬性定義了當(dāng)Flex容器的空間不足時，項目的縮小比例。同樣，它接受一個無單位的數(shù)值，默認(rèn)值為1。意味著如果空間不足，Flex項目將會相等比例地縮小。一個值為0將阻止項目在空間不足時縮小。
flex-basis
這個屬性指定了Flex項目在分配多余空間之前應(yīng)占據(jù)的主軸空間。它可以設(shè)為auto（自動大小），也可以設(shè)置為任何長度單位，例如px,em,%等。默認(rèn)值auto基于項目內(nèi)容或者寬度/高度屬性的大小。
flex
這是flex-grow, flex-shrink和flex-basis的簡寫，默認(rèn)值為0 1 auto。它是一種方便的方法，可以一次性設(shè)置三個屬性。舉個例子，flex: 1等同于flex: 1 1 0%，這表示項目將會以1的比例放大和縮小，并且flex-basis為0%，意味著它的起始大小是0，完全依賴于剩余空間的分配。
align-self
允許單獨的Flex項目覆蓋Flex容器上的align-items屬性。這意味著你可以單獨調(diào)節(jié)某個項目的垂直對齊方式。它可以取如下值：
- auto: 項目繼承其父容器的align-items屬性，如果父容器沒有設(shè)置，則表現(xiàn)為stretch。
- flex-start: 項目對齊于交叉軸的起點。
- flex-end: 項目對齊于交叉軸的終點。
- center: 項目在交叉軸上居中對齊。
- baseline: 項目基于文字基線對齊。
- stretch: 項目被拉伸填充容器，如果未設(shè)置高度或設(shè)置為auto的話。
屬性示例
我將上面的各類屬性整合成了一個可操作的HTML頁面，可以更加直觀的觀察彈性盒相關(guān)屬性的效果
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>Flexbox</title><style>ul {list-style: none;}.flex-container {background: #f7f7f7;padding: 10px;overflow-y: auto;height: 300px;}.flex-item {background: #6495ED;color: white;padding: 10px;margin: 5px;text-align: center;}.flex-item:nth-child(2n) {padding: 20px;}.button {display: flex;}.button h3 {text-align: center;background: lightgreen;margin: 5px;padding: 5px;}.button div {padding: 5px;background: #aaa;margin: 5px;text-align: center;cursor: pointer;}</style>
</head><body><div class="flex-container" id="flex-container"></div><ul class="button" id="button-container"></ul><ul class="button" id="button-item"></ul><script>// 創(chuàng)建標(biāo)簽const createElement = ({ ele, style, attr, parent }) => {const element =ele instanceof HTMLElement ? ele : document.createElement(ele ?? "div");style &&Object.keys(style)?.forEach((key) => (element.style[key] = style[key]));attr && Object.keys(attr)?.forEach((key) => (element[key] = attr[key]));parent && parent.appendChild(element);return element;};const containerConfig = [{name: "display",attr: ["flex", "block", "inline-flex"]},{name: "flex-direction",attr: ["row", "row-reverse", "column", "column-reverse"]},{name: "flex-wrap",attr: ["nowrap", "wrap", "wrap-reverse"]},{name: "flex-flow",attr: ["flex-direction", "flex-wrap"]},{name: "justify-content",attr: ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"]},{name: "align-items",attr: ["stretch", "flex-start", "flex-end", "center", "baseline"]},{name: "align-content",attr: ["stretch", "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"]}]const itemConfig = [{"name": "order","attr": [0, 1, -1, 2] // 整數(shù)值，可以是任意整數(shù)，包括負(fù)數(shù)},{"name": "flex-grow","attr": [0, 1, 2, 3] // 無單位數(shù)，定義項目的放大比例},{"name": "flex-shrink","attr": [1, 2, 3, 0] // 無單位數(shù)，定義項目的縮小比例},{"name": "flex-basis","attr": ["50px", "20%", "auto", "0"] // 長度值或“auto”，定義項目在分配多余空間之前的默認(rèn)大小},{"name": "flex","attr": ["0 1 auto", "1 0 50px", "3 2 25%", "none"] // 是flex-grow, flex-shrink 和 flex-basis的組合},{"name": "align-self","attr": ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"] // 允許單獨的項目與其他項目有不同的對齊方式}]const itemLength = 8const itemSplit = 3//分割項目屬性標(biāo)簽，只有前面幾個生效，更好看出效果const flexContainer = document.querySelector("#flex-container")const createContainer = (length) => {Array(length).fill("").forEach((_, i) => {let className = "flex-item"const it = createElement({parent: flexContainer, attr: {textContent: `第${i}項`}})if (i <= itemSplit) {className += " active"}it.setAttribute("class", className)})}createContainer(itemLength)const buttonContainer = document.querySelector("#button-container")const buttonItem = document.querySelector("#button-item")const flexItem = document.querySelectorAll(".flex-item.active")const styleBtnTemp = (target, config, parent) => {config.forEach(conf => {const { name, attr } = confconst li = createElement({ele: "li", parent})createElement({ele: "h3", parent: li, attr: {textContent: name}})attr.forEach(it => {createElement({parent: li, attr: {textContent: it}}).addEventListener("click", () => {console.log(target);target.forEach(elem => {elem.style[name] = it})})})})}styleBtnTemp([flexContainer], containerConfig, buttonContainer)styleBtnTemp(flexItem, itemConfig, buttonItem)</script></body></html>demo效果如下，這個頁面可玩性還是很高的
總結(jié)
Flexbox的設(shè)計初衷是為了應(yīng)對傳統(tǒng)布局方式（如浮動布局、定位布局）難以處理的一些場景，尤其是在動態(tài)變化的視口大小和不確定長度的內(nèi)容中實現(xiàn)靈活的布局。
感謝你看到這里，以上就是文章全部內(nèi)容了，如果覺得文章不錯的話，還請三連鼓勵一下，你的支持就是我創(chuàng)作的最大動力，謝謝！
相關(guān)代碼
myCode: 基于js的一些小案例或者項目 - Gitee.com
參考
A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
A CSS Flexbox Cheatsheet | DigitalOcean
彈性盒子 - 學(xué)習(xí) Web 開發(fā) | MDN
CSS 彈性盒子布局 - CSS：層疊樣式表 | MDN