
Flex靈活佈局
顯示: 柔性
開啟 Flex 版面模式。將一個元素設定為 Flex 容器,其直接子元素將成為 Flex 項。
1 2 3 | .container {
display: flex;
}
|
登入後複製
登入後複製
登入後複製
彎曲方向
定義主軸方向(項目排列方向)。可選值:
- 行(預設):水平,從左到右。
- row-reverse:水平方向,由右到左。
- 列:垂直,由上到下。
- column-reverse:垂直,由下往上。
1 2 3 | .container {
flex-direction: row | row-reverse | column | column-reverse;
}
|
登入後複製
登入後複製
登入後複製
柔性包裹
控制當一行空間不足時是否換行。可選值:
- nowrap(預設):不換行,物品可能會溢出容器。
- wrap:換行,項目排列成多行。
- wrap-reverse:換行,第一行在底部,後續行向上排列。
1 2 3 | .container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
|
登入後複製
登入後複製
登入後複製
證明內容合理
定義主軸上的對齊方式。可選值:
- flex-start(預設):專案與起點對齊。
- flex-end:項目與終點對齊。
- center:專案居中對齊。
- space- Between:均勻分佈項目之間的間距,第一個和最後一個項目分別附著在容器的兩端。
- space-around:項目間均勻分佈間距,項目兩側的間距相等。
- space-evenly:均勻分佈item之間的間距,item與容器邊緣的間距以及item之間的間距相等。
1 2 3 | .container {
justify-content: flex-start | flex- end | center | space-between | space-around | space-evenly;
}
|
登入後複製
登入後複製
登入後複製
對齊項目
定義交叉軸上的對齊方式。可選值:
- 拉伸(預設):項目拉伸以填充整個橫軸。
- flex-start:專案與橫軸的起點對齊。
- flex-end:項目與橫軸的末端對齊。
- center:專案以橫軸為中心。
- 基線:項目依基線對齊。
1 2 3 | .container {
align-items: stretch | flex-start | flex- end | center | baseline;
}
|
登入後複製
登入後複製
登入後複製
對齊內容
僅適用於多行Flex版面(flex-wrap:wrap),定義多行項目在橫軸上的對齊方式。可選值:
- 拉伸(預設):每行拉伸以填充整個交叉軸。
- flex-start:每行與交叉軸的起點對齊。
- flex-end:每行與交叉軸的末端對齊。
- center:每行與交叉軸的中心對齊。
- space- Between:均勻分佈每行之間的空間,第一行和最後一行分別附著在容器的兩端
- space-around:均勻分佈每行之間的空間,且行兩側的空間相等。
1 2 3 | .container {
display: flex;
}
|
登入後複製
登入後複製
登入後複製
命令
定義項目的順序。值越小,階數越高。預設值為 0。
1 2 3 | .container {
flex-direction: row | row-reverse | column | column-reverse;
}
|
登入後複製
登入後複製
登入後複製
彈性成長
定義項目的放大比例。預設值為0,表示不放大。如果所有項目都設定為非零值,則剩餘空間按比例分配。
1 2 3 | .container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
|
登入後複製
登入後複製
登入後複製
彎曲收縮
定義項目的收縮率。預設為1,意味著它可以收縮。如果所有項目都設定為非零值,它們會按比例縮小以防止溢出容器。
1 2 3 | .container {
justify-content: flex-start | flex- end | center | space-between | space-around | space-evenly;
}
|
登入後複製
登入後複製
登入後複製
彈性基礎
定義分配剩餘空間之前項目的初始大小。接受長度、百分比、自動(預設)或內容值。
1 2 3 | .container {
align-items: stretch | flex-start | flex- end | center | baseline;
}
|
登入後複製
登入後複製
登入後複製
彎曲
flex-grow、flex-shrink 和 flex-basis 的簡寫。預設為 0 1 自動。
1 2 3 | .container {
align-content: stretch | flex-start | flex- end | center | space-between | space-around;
}
|
登入後複製
登入後複製
自我對齊
覆蓋容器的align-items屬性以定義單一項目在橫軸上的對齊方式。可選值與align-items相同。
1 2 3 | .item {
order: <integer>;
}
|
登入後複製
網格 網格佈局
顯示:網格;
開啟網格佈局模式。將一個元素設定為 Grid 容器,其直接子元素將成為 Grid 項目(單元格)。
1 2 3 | .item {
flex-grow: <number>;
}
|
登入後複製
網格模板列和網格模板行
定義網格的列軌道和行軌道的大小。接受長度、百分比、fr(分數單位,表示網格空間的分數)或auto值。您也可以使用repeat()函數建立重複軌道,並使用minmax()函數定義軌道的最小和最大尺寸。
1 2 3 | .item {
flex-shrink: <number>;
}
|
登入後複製
網格模板區域
透過命名項目並用字串描述網格結構來定義網格佈局的區域。項目名稱使用 .代表一個空白單元格。
1 2 3 | .item {
flex-basis: <length> | <percentage> | auto | content;
}
|
登入後複製
網格間隙或網格列間隙和網格行間隙
設定網格中項目之間的間隙。接受長度或百分比值。
1 2 3 | .container {
display: flex;
}
|
登入後複製
登入後複製
登入後複製
網格自動列和網格自動行
定義自動填滿網格時新新增的行或列的軌道大小。當項目超出定義的網格範圍時生效。
1 2 3 | .container {
flex-direction: row | row-reverse | column | column-reverse;
}
|
登入後複製
登入後複製
登入後複製
網格自動流
控制網格項目如何自動填滿和排列。可選值:
- 行(預設):按行填滿。
- 列:按列填寫。
- dense:當row或column與dense一起使用時,如果網格中有間隙,新的項目將嘗試填充這些間隙,而不是僅僅將它們添加到網格的末尾。
1 2 3 | .container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
|
登入後複製
登入後複製
登入後複製
網格列開始、網格列結束、網格行開始和網格行結束
手動指定網格中項目的開始和結束位置。
1 2 3 | .container {
justify-content: flex-start | flex- end | center | space-between | space-around | space-evenly;
}
|
登入後複製
登入後複製
登入後複製
網格區域
同時設定 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的簡寫屬性,或引用 grid-template-areas 中定義的區域名稱。
1 2 3 | .container {
align-items: stretch | flex-start | flex- end | center | baseline;
}
|
登入後複製
登入後複製
登入後複製
CSS Grid 與 Flexbox 結合
在某些情況下,我們可以結合 CSS Grid 和 Flexbox 的優點來建立更複雜的響應式佈局。
1 2 3 | .container {
align-content: stretch | flex-start | flex- end | center | space-between | space-around;
}
|
登入後複製
登入後複製
首先,CSS Grid 用於建立具有自適應列寬的網格佈局。每個網格項目(子元素)都使用內部的 Flexbox 來垂直居中內容。當螢幕寬度小於 768px 時,媒體查詢會切換為單列佈局以適應行動裝置。
Flexbox 與網格選擇
選擇使用 Flexbox 還是 Grid 通常取決於特定需求:
- Flexbox適合處理一維佈局,例如行或列中的元素排列,以及元素對齊和填充。
- CSS Grid 更適合處理二維佈局,例如表格或複雜的網格佈局,以及精確的單元格控制。
以上是CSS Flexbox 和 Grid:建構響應式佈局的藝術的詳細內容。更多資訊請關注PHP中文網其他相關文章!