適用場景
一維（行或列）布局
基本概念
-
包裹所有被布局元素的父元素為
容器
-
所有被布局的元素為
項目
-
項目的排列方向（垂直/水平）為
主軸 -
與主軸垂直的方向交
交叉軸
容器上啟用 flex 布局
將容器的 display 樣式設置為 flex 或 inline-flex
排列方向 flex-direction
-
row（默認值）：從左到右水平排列，此時主軸為水平方向
-
row-reverse：從右到左水平排列，此時主軸為水平方向
-
column：從上到下垂直排列，此時主軸為垂直方向
-
column-reverse：從下到上垂直排列，此時主軸為垂直方向
換行 flex-wrap
-
nowrap（默認值）：不換行，項目可能被壓縮或溢出容器。
-
wrap：換行，第二行在第一行下方（水平排列時）
-
wrap-reverse：換行，第二行在第一行上方（水平排列時）。
主軸上的對齊方式 justify-content
flex-start（默認值）：項目靠主軸起點對齊。flex-end：項目靠主軸終點對齊center：項目在主軸上居中對齊space-between：項目兩端對齊，間隔均勻分布space-around：項目周圍間隔均勻分布（兩端間隔為中間的一半）space-evenly：項目之間及兩端間隔完全相等
交叉軸的對齊方式 align-items
交叉軸即與主軸垂直的方向
stretch（默認值）：項目拉伸以填滿交叉軸。flex-start：項目靠交叉軸起點對齊。flex-end：項目靠交叉軸終點對齊。center：項目在交叉軸上居中對齊。baseline：項目基于文本基線對齊。
多行的對齊方式 align-content
僅在 flex-wrap: wrap 生效
flex-start：多行靠交叉軸起點對齊。flex-end：多行靠交叉軸終點對齊。center：多行在交叉軸上居中對齊。stretch：多行拉伸以填滿交叉軸剩余空間。space-between：多行兩端對齊，間隔均勻分布。space-around：多行周圍間隔均勻分布。space-evenly：多行之間及兩端間隔完全相等。
.container {display: flex;flex-wrap: wrap;align-content: space-around;
}
項目上添加 flex 特性
放大 flex-grow
- 定義項目在容器有剩余空間時的放大比例，默認值為
0（不放大）。 - 給容器添加
min-width: 0或overflow: auto;可防止內容撐開容器。
.item {flex-grow: 1; /* 項目將按比例分配剩余空間 */
}
縮小 flex-shrink
定義項目在容器空間不足時的縮小比例，默認值為 1（按比例縮小）。
.item {flex-shrink: 0; /* 項目不縮小，可能導致溢出 */
}
初始大小 flex-basis
定義項目在分配剩余空間之前的初始大小，可以是長度值（如 200px）或百分比（如 50%），默認值為 auto（根據內容大小自動調整）。
.item {flex-basis: 100px; /* 項目初始寬度為 100px */
}
調整項目交叉軸的對齊方式 align-self
優先級高于容器的 align-items
.item {align-self: flex-end; /* 該項目在交叉軸上靠終點對齊 */
}
排序 order
項目的排列順序。數值越小，排列越靠前，默認為0
簡寫
flex
flex 是 flex-grow、flex-shrink 和 flex-basis 的簡寫屬性，常用寫法：
flex: 1：等同于flex: 1 1 0%，表示項目放大、縮小且初始大小為內容大小。flex: 0 1 auto：表示項目不放大、按比例縮小且初始大小為內容大小。
.item {flex: 1;
}
- flex: initial、flex:0、flex:1、flex:none、flex:auto的區別和使用場景
https://blog.csdn.net/weixin_41192489/article/details/120846362
flex-flow
flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。
深度詳解
剩余空間分配規則
flex-grow，flex-shrink和flex-basis
https://blog.csdn.net/weixin_41192489/article/details/120842902
實戰范例
繪制骰子
https://blog.csdn.net/weixin_41192489/article/details/136398234
水平居中導航欄
<nav class="flex justify-center space-x-4"><a href="#">首頁</a><a href="#">產品</a><a href="#">關于我們</a>
</nav>
nav {display: flex;justify-content: center;gap: 16px;
}
垂直居中卡片
<div class="flex items-center justify-center h-screen bg-gray-200"><div class="bg-white p-8 rounded shadow-md"><h2 class="text-2xl font-bold mb-4">歡迎使用</h2><p>這是一個垂直居中的卡片。</p></div>
</div>
body {margin: 0;
}
響應式列布局
<div class="flex flex-wrap"><div class="w-full md:w-1/2 lg:w-1/3 p-4">內容1</div><div class="w-full md:w-1/2 lg:w-1/3 p-4">內容2</div><div class="w-full md:w-1/2 lg:w-1/3 p-4">內容3</div>
</div>
@media (min-width: 768px) {.w-1/2 {flex: 0 0 50%;max-width: 50%;}
}
@media (min-width: 1024px) {.w-1/3 {flex: 0 0 33.33%;max-width: 33.33%;}
}
實戰技巧
- 使用margin:auto智能分配剩余空間
https://blog.csdn.net/weixin_41192489/article/details/120834852 - flex-grow 自適配寬度避免內容超出擠壓兩側的最佳實踐
https://blog.csdn.net/weixin_41192489/article/details/139058300
注意事項
-
Flex 與
float、clear沖突：Flex 項目自動脫離文檔流，float和clear屬性對其無效。 -
瀏覽器兼容性：主流瀏覽器（Chrome、Firefox、Safari、Edge）均支持 Flex 布局，但需注意對舊版瀏覽器（如 IE10 及以下）添加前綴（
-webkit-,-ms-）。
