佛山市官网网站建设公司中卫平面设计师招聘
适用场景
一维（行或列）布局
基本概念
-
包裹所有被布局元素的父元素为
容器
-
所有被布局的元素为
项目
-
项目的排列方向（垂直/水平）为
主轴 -
与主轴垂直的方向交
交叉轴
容器上启用 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-）。