柚子快報邀請碼778899分享：前端 HTML常用布局
柚子快報邀請碼778899分享：前端 HTML常用布局
Flex布局
flex容器屬性
flex-direction（子元素排列順序）
flex-direction:屬性規(guī)定靈活項目的排列方向（主軸方向）:
row:默認值,靈活的項目將水平顯示。
row-reverse:與row相同，但是以相反的順序。
column:靈活的項目將垂直顯示。
column-reverse:與column相同，但是以相反的順序。
flex-wrap（換行）
用于設(shè)置伸縮項目在主軸上的換行方式:
nowrap:默認值。規(guī)定靈活的項目不拆行或不拆列。
wrap:規(guī)定靈活的項目在必要的時候拆行或拆列。
wrap-reverse:規(guī)定靈活的項目在必要的時候拆行或拆列，但是以相反的順序。
?flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap;——簡化代碼
?justify-content（主軸對齊方式）
justify-content：用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式:
flex-start:默認值。項目位于容器的開頭。
flex-end:項目位于容器的結(jié)尾。
center:項目位于容器的中心。
space-between:項目位于各行之間留有空白的容器內(nèi)。
space-around:項目位于各行之前、之間、之后都留有空白的容器內(nèi)。
align-items（側(cè)軸對齊方式）
align-items:定義flex子項目在flex容器的側(cè)軸（縱軸）方向上的對齊方式:
stretch:默認值。元素被拉伸以適應(yīng)容器。
如果指定側(cè)軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
center:元素位于容器的中心。
flex-start:元素位于容器的開頭。
flex-end:元素位于容器的結(jié)尾。
baseline:元素位于容器的基線上。
?align-content（橫向排列換行后多行文本y軸對齊方式）
align-content：用于設(shè)置多行子元素在容器側(cè)軸上的對齊方式(多行時才有效)；
stretch:默認值。元素被拉伸以適應(yīng)容器。各行將會伸展以占用剩余的空間。
如果剩余的空間是負數(shù)，該值等效于'flex-start'。在其它情況下，剩余空間被所有行平分，以擴大它們的側(cè)軸尺寸。
center:元素位于容器的中心。
flex-start:元素位于容器的開頭。
flex-end:元素位于容器的結(jié)尾。
space-between:元素位于各行之間留有空白的容器內(nèi)。
space-around:元素位于各行之前、之間、之后都留有空白的容器內(nèi)。
說明：
align-content在側(cè)軸上執(zhí)行樣式的時候，會把默認的間距給合并。對于單行子元素，該屬性不起作用
flex子元素屬性
align-self屬性（單個元素側(cè)軸對齊方式）
align-self：屬性定義flex子項單獨在側(cè)軸（縱軸）方向上的對齊方式:
注意：align-self 屬性可重寫靈活容器的 align-items 屬性。
auto:默認值。元素繼承了它的父容器的align-items屬性。如果沒有父容器則為 "stretch"。
stretch:元素被拉伸以適應(yīng)容器。
center:元素位于容器的中心。
flex-start:元素位于容器的開頭。
flex-end:元素位于容器的結(jié)尾。
baseline:元素位于容器的基線上。
flex-grow擴展比率
flex-grow 是 Flex 布局中的一個屬性，用于指定當 Flex 容器有剩余空間時，項目的放大比例。
其默認值為 0 ，表示項目不會自動放大去占據(jù)剩余空間。如果將 flex-grow 設(shè)置為一個大于 0 的數(shù)值，那么該項目就會按照設(shè)定的比例去分配剩余空間。
例如，有一個 Flex 容器寬度為 800px ，其中包含三個項目 A、B、C ，寬度分別為 200px、200px、200px ，而容器的剩余空間為 200px 。
假設(shè)項目 A 的 flex-grow 為 1 ，項目 B 的 flex-grow 為 2 ，項目 C 的 flex-grow 為 3 。
首先計算總放大比例：1 + 2 + 3 = 6 。
然后計算每個項目分配到的剩余空間：
項目 A ：200×(1/6) ≈ 33.33px ，最終寬度約為 233.33px 。
項目 B ：200×(2/6) ≈ 66.67px ，最終寬度約為 266.67px 。
項目 C ：200×(3/6) = 100px ，最終寬度約為 300px 。
再比如，如果只有項目 A 的 flex-grow 為 2 ，項目 B 和 C 的 flex-grow 都為 0 。
那么項目 B 和 C 不會放大，項目 A 會獨自分配全部剩余空間 200px ，最終寬度為 400px 。
通過合理設(shè)置 flex-grow 的值，可以根據(jù)需求靈活地控制各個項目在有剩余空間時的放大程度，從而實現(xiàn)多樣化的布局效果
flex-shrink收縮比率
flex-shrink 是 Flex 布局中的一個屬性，用于決定當 Flex 容器空間不足時，項目收縮的比例。
其默認值為 1，表示項目會按照一定比例收縮以適應(yīng)容器空間。如果將 flex-shrink 設(shè)置為 0 ，則表示該項目不收縮。
例如，有一個 Flex 容器寬度為 600px ，其中包含三個項目 A、B、C ，寬度分別為 200px、300px、400px 。此時，總寬度超過了容器寬度 300px 。
如果三個項目的 flex-shrink 都為 1 ，那么計算每個項目收縮的寬度時：
項目 A 的收縮權(quán)重為 200×1 = 200 。
項目 B 的收縮權(quán)重為 300×1 = 300 。
項目 C 的收縮權(quán)重為 400×1 = 400 。
總收縮權(quán)重為 200 + 300 + 400 = 900 。
每個項目收縮的寬度為：
項目 A 收縮 300×(200/900) ≈ 66.67px ，最終寬度約為 133.33px 。
項目 B 收縮 300×(300/900) = 100px ，最終寬度約為 200px 。
項目 C 收縮 300×(400/900) ≈ 133.33px ，最終寬度約為 266.67px 。
再比如，如果項目 A 的 flex-shrink 為 2 ，項目 B 的 flex-shrink 為 1 ，項目 C 的 flex-shrink 為 3 。
此時，總收縮權(quán)重為 200×2 + 300×1 + 400×3 = 2100 。
每個項目收縮的寬度為：
項目 A 收縮 300×(400/2100) ≈ 57.14px ，最終寬度約為 142.86px 。
項目 B 收縮 300×(300/2100) ≈ 42.86px ，最終寬度約為 257.14px 。
項目 C 收縮 300×(1200/2100) ≈ 171.43px ，最終寬度約為 228.57px 。
通過靈活設(shè)置 flex-shrink 的值，可以更精確地控制 Flex 項目在空間不足時的收縮情況，從而實現(xiàn)更復(fù)雜和靈活的布局效果。
flex-basis伸縮基準值
flex-basis:設(shè)置彈性盒伸縮基準值（指定flex-item在主軸上的初始大?。?
number:規(guī)定靈活項目的初始長度。
auto：默認值。長度等于靈活項目的長度。如果該項目未指定長度，則長度將根據(jù)內(nèi)容決定。
flex屬性簡寫
（1）flex 屬性用于設(shè)置彈性盒模型對象的子元素如何分配父元素的空間。
（2）flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。
auto = 0 1 auto
none = 0 0 auto
1 = 1 1 auto
Grid布局
Grid 布局（網(wǎng)格布局）是 CSS 中一種強大的布局方式，用于創(chuàng)建二維的網(wǎng)格結(jié)構(gòu)來排列網(wǎng)頁元素。
它主要通過以下屬性來實現(xiàn)布局控制：
display: grid：將容器元素定義為網(wǎng)格容器。grid-template-columns?和?grid-template-rows：用于定義網(wǎng)格的列和行的尺寸，可以使用固定長度（如?100px）、百分比（如?50%）或?fr?單位（表示網(wǎng)格軌道的彈性比例）來指定。
例如：grid-template-columns: 100px 200px 300px;?表示定義三列，寬度分別為 100 像素、200 像素和 300 像素。grid-template-rows: 50% 50%;?表示定義兩行，高度各占 50%。grid-gap（或?grid-row-gap?和?grid-column-gap）：用于設(shè)置網(wǎng)格單元格之間的間距。grid-template-areas：通過給網(wǎng)格區(qū)域命名，來直觀地定義網(wǎng)格的布局結(jié)構(gòu)。grid-auto-columns?和?grid-auto-rows：用于定義自動生成的額外網(wǎng)格軌道的尺寸。
?以下是一個簡單的 Grid 布局示例：
?
在這個示例中，創(chuàng)建了一個包含三列兩行的網(wǎng)格容器，并設(shè)置了單元格之間的間距，然后將六個元素放置在相應(yīng)的單元格中。
Grid 布局能夠?qū)崿F(xiàn)復(fù)雜而靈活的頁面布局，特別適合構(gòu)建具有規(guī)則結(jié)構(gòu)和動態(tài)響應(yīng)需求的布局。它在處理多列多行的布局、元素的對齊和分布等方面提供了強大而便捷的方式。
柚子快報邀請碼778899分享：前端 HTML常用布局
參考文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Tospinob2b優(yōu)選商城
