使用Flexbox創建靈活的佈局

flexbox：a CSS佈局powerhouse

>

flexbox或CSS Flexible Box佈局模塊，簡化了一維佈局 - 連續或列中的項目。 將display: flex（或display: inline-flex）應用到容器上，將其直接的孩子轉換為flexbox規則的flex項目。這簡化了編碼各種UI模式的編碼，例如靈活的形式或垂直中心。 在水平對齊項目或上時，選擇彈性箱，而不是垂直，但不是兩者兼而有之。網格以二維佈置（行和列）出色。

>

> flexbox基礎

在CSS網格之前，flexbox在單軸佈局（使用

>或flex-direction: row）的單軸佈局（行或列）中重新定位。 只需在容器中添加column即可為孩子們啟動彈性格式上下文。 注意：較舊的瀏覽器可能需要供應商前綴，例如display: flex>或-webkit-flex>。 -moz-flex>

>下圖說明了Flex容器的直接兒童如何成為Flex物品。這些可以是元素或非空文本節點。 沒有進一步的樣式，項目的高度相等（基於最高），水平堆疊（或垂直寫作模式），並且沒有間距。 他們甚至可能溢出容器。

實用的flexbox應用程序

flexbox簡化了複雜的佈局。考慮以下示例：

1。媒體對象組件：

>傳統的媒體對象（圖像與文本一起）先前需要的浮點和透明框架黑客。 Flexbox消除了這一點：

這個簡潔的代碼達到相同的結果，動態適應圖像尺寸。

.media__object { display: flex; }
.media__object img { margin-right: 20px; }

2。柔性形式組件：

>使用Flexbox創建響應式形式是毫不費力的。 shorthand屬性（組合

，

和flex）控制項目尺寸：> flex-grow flex-shrink>輸入擴展，而按鈕仍然是固定的150px。 請記住，flex-basis和

值是成比例的。

div { display: flex; }
input[type="text"], button { border: 0; font: inherit; }
input[type="text"] { flex: 1 0 auto; } /* Expands to fill space */
button { background: #003; color: whitesmoke; display: block; text-align: center; flex: 0 0 150px; } /* Fixed width */

>

flex-grow flex-shrink

3。垂直中心：

垂直居中的內容用>簡化：>

這將彈性物品集中在其容器中。 align-items: center

4。網格狀佈局：

雖然網格是網格的理想選擇，但Flexbox可以使用flex-wrap: wrap創建適應性的佈局，並調整flex-basis> and flex-grow：

>

.media__object { display: flex; }
.media__object img { margin-right: 20px; }

flexbox vs.網格：選擇正確的工具

>

>將網格用於二維佈局；使用Flexbox進行單軸佈局，需要水平或垂直對齊，但並非兩者兼具。 通常，項目將這兩種技術結合在一起以獲得最佳結果。

>進一步的學習：請諮詢CSS-Tricks的“ Flexbox的完整指南”和其他資源，以深入研究Flexbox功能。

以上是使用Flexbox創建靈活的佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！