flexbox 是一種用于構建響應式界面的 css 布局模式，其核心在于容器和項目。1. 通過設置 display: flex 或 inline-flex 創建 flex 容器；2. 使用 flex-direction 控制排列方向；3. justify-content 設置主軸對齊方式；4. align-items 設置交叉軸對齊方式；5. flex-wrap 控制是否換行；6. flex 屬性控制伸縮行為。它是一維布局，適合單行或單列的靈活排布，與 grid 的二維布局不同，更適用于簡單響應式結構，結合媒體查詢可實現不同屏幕下的自適應排列，且現代瀏覽器對其兼容性良好。
css 彈性布局（Flexbox）是一種強大的布局模式，它允許你輕松地控制容器內元素的排列方式、對齊方式和空間分配。它特別適合于構建響應式和動態的用戶界面。簡單來說，Flexbox 能讓你更靈活地操控網頁元素的排列，尤其是在不同屏幕尺寸下。
解決方案
Flexbox 的核心在于容器（flex container）和項目（flex items）。你需要先將一個元素設置為 display: flex 或 display: inline-flex，這個元素就成為了 flex 容器，它的直接子元素則成為 flex 項目。
立即學習“前端免費學習筆記（深入）”；
以下是一些關鍵的 Flexbox 屬性：
- flex-direction: 決定 flex 項目在容器中的排列方向。可選值包括 row (默認值，水平排列)、column (垂直排列)、row-reverse 和 column-reverse。
- justify-content: 定義 flex 項目在主軸上的對齊方式。可選值包括 flex-start (默認值，左對齊或上對齊)、flex-end (右對齊或下對齊)、center (居中對齊)、space-between (項目之間平均分配剩余空間) 和 space-around (項目周圍平均分配剩余空間)。
- align-items: 定義 flex 項目在交叉軸上的對齊方式。可選值包括 stretch (默認值，拉伸以填充容器)、flex-start (頂部對齊或左對齊)、flex-end (底部對齊或右對齊)、center (居中對齊) 和 baseline (基線對齊)。
- flex-wrap: 控制 flex 項目是否換行。可選值包括 nowrap (默認值，不換行)、wrap (換行) 和 wrap-reverse (反向換行)。
- flex-flow: flex-direction 和 flex-wrap 的簡寫屬性。例如：flex-flow: row wrap;
- flex-grow: 定義 flex 項目在容器中有剩余空間時，應該如何放大。
- flex-shrink: 定義 flex 項目在容器空間不足時，應該如何縮小。
- flex-basis: 定義 flex 項目在分配剩余空間之前，應該占據的空間大小。
- flex: flex-grow、flex-shrink 和 flex-basis 的簡寫屬性。例如：flex: 1 1 auto; (常用的 flex: 1; 相當于 flex: 1 1 0;)
一個簡單的例子：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
.container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 200px; border: 1px solid black; } .item { width: 100px; height: 50px; background-color: lightblue; margin: 10px; text-align: center; line-height: 50px; }
這段代碼會將三個 item 元素水平和垂直居中放置在 container 元素中。
Flexbox 與 Grid 布局的區別是什么？
Flexbox 是一維布局系統，主要用于控制單個行或列中的項目排列。而 Grid 布局是二維布局系統，可以同時控制行和列，更適合于構建復雜的頁面結構。選擇哪個取決于你的布局需求。如果你只需要控制一行的元素，Flexbox 通常更簡單直接。如果需要創建復雜的網格結構，Grid 布局更合適。
如何使用 Flexbox 實現響應式布局？
Flexbox 本身就具有很強的響應式能力。你可以結合媒體查詢（Media Queries）來調整 Flexbox 的屬性，以適應不同的屏幕尺寸。例如，你可以改變 flex-direction 的值，讓項目在小屏幕上垂直排列，在大屏幕上水平排列。或者，可以使用 flex-wrap: wrap; 來允許項目在空間不足時自動換行。
Flexbox 的兼容性如何？
Flexbox 的兼容性非常好。現代瀏覽器都支持 Flexbox，包括 chrome、firefox、safari、edge 等。對于舊版本的瀏覽器，可能需要添加一些前綴，例如 -webkit- 或 -ms-，但現在已經很少需要這樣做了。可以使用 Autoprefixer 等工具自動處理瀏覽器兼容性問題。
以上就是CSS <a
