Flexbox 布局完全入门指南

文章目录1. 为什么需要 Flexbox2. 核心概念主轴与交叉轴 3. 五大核心属性逐个击破3.1 flex-direction —— 传送带朝哪边走3.2 flex-wrap —— 货物太多时换行还是挤一挤3.3 justify-content —— 如何在主轴上安排货物3.4 align-items —— 单行内如何垂直摆放货物3.5 align-content —— 多行货物整体如何分布实战练习1. 为什么需要 Flexbox它把一个容器变成“弹性盒子”让里面的子元素能够灵活地伸缩、对齐和分配空间。 你只需要告诉管家“把东西放在中间”、“让它们均匀散开”剩下的它会自动搞定。2. 核心概念主轴与交叉轴 这是理解所有属性的关键我们用一个比喻。想象你手里有一条 传送带这就是“主轴” Main Axis它有一个固定的运行方向。你可以把货物子元素一个个放在传送带上。同时传送带本身有宽度货物的摆放还可以在垂直于传送带的方向上对齐这个垂直方向就是 交叉轴Cross Axis。主轴方向由 flex-direction 决定货物是水平流动还是垂直流动。交叉轴方向始终与主轴垂直。所有对齐属性都是围绕这两个轴展开的。记住这张图的概念(主轴方向 → → →)[货1][货2][货3]... ← 这是默认水平主轴 ↑ 交叉轴方向垂直对齐3. 五大核心属性逐个击破我们先准备一个基础的 HTML 结构和 CSS后面所有的演示都基于它修改。divclasscontainerdivclassitem1/divdivclassitem2/divdivclassitem3/div/div.container{display: flex;/* 开启弹性盒子管家模式 */ /* 下面我们将在这里添加各种属性 */ /* 为了演示效果给容器一点高度和背景 */ height: 200px;background-color:#e8f0fe;margin-bottom: 20px;}.item{width: 80px;/* 为了看清每个项目给个背景色和间距 */ background-color:#4a90e2;color: white;padding: 20px0;text-align: center;border-radius: 8px;}3.1 flex-direction —— 传送带朝哪边走它决定主轴的方向也就是货物摆放的流向。row默认主轴水平从左到右。传送带水平向右移动。row-reverse主轴水平从右到左。column主轴垂直从上到下。column-reverse主轴垂直从下到上。.container{display: flex;flex-direction: row;/* 可以改成 row-reverse, column, column-reverse 试试 */}效果描述以 row 为例 三个小盒子在容器里从左往右排成一行就像货物放在水平传送带上。row默认columnrow-reversecolumn-reverse3.2 flex-wrap —— 货物太多时换行还是挤一挤当货物总宽度超过传送带宽度时flex-wrap 决定是否换行。nowrap默认不换行所有项目硬挤在一行可能会被压缩。wrap自动换行放不下的项目会移到下一行保持原本尺寸。wrap-reverse换行但行的排列方向反转第一行在下方。.container{display: flex;flex-wrap: wrap;/* 项目宽度若超过容器会自动折行 */ /* 为了让项目换行我们可以多复制几个item或者把容器宽度设小 */ width: 260px;}.item{width: 80px;/* 三个*80240容器宽260刚好一行。再加一个就会换行 */}效果 如果只有三个项目它们舒舒服服在一行。但如果有五个项目后两个会自动掉到第二行。nowrapwrapwrap-reverse3.3 justify-content —— 如何在主轴上安排货物它定义项目在主轴上的对齐方式和间距分配。想象你是管理员手里有一些空余空间你决定如何把货物摆在传送带上。flex-start默认所有货物挤在起点。flex-end所有货物挤在终点。center所有货物居中聚集。space-between货物两端对齐中间空间平均分配。第一个贴起点最后一个贴终点。space-around每个货物两侧的间距相等。所以两个货物之间的空白是边缘空白的两倍。space-evenly所有间距完全相等包括货物到边缘的距离。.container{display: flex;justify-content: center;/* 切换不同值查看效果 */}flex-start:[1][2][3](右边大量空白)center:[1][2][3](居中)flex-end:[1][2][3](靠右)space-between:[1][2][3](1贴左3贴右间距相等)space-around:[1][2][3](两边空白是中间空白的一半)space-evenly:[1][2][3](空白完全相等1到左边缘间距1到2的间距)3.4 align-items —— 单行内如何垂直摆放货物这个属性用来设置项目在交叉轴上的对齐方式适用于所有项目在同一行或一列内的场景。stretch默认如果项目没设高度/宽度会拉伸填满整个交叉轴。flex-start项目在交叉轴起点对齐。flex-end项目在交叉轴终点对齐。center项目在交叉轴居中。这就是传说中的“垂直居中”神器baseline项目内文字的第一行基线对齐。.container{display: flex;align-items: center;/* 垂直居中也是最常用的值 */ height: 200px;/* 给容器一个高度才能看出交叉轴对齐效果 */}效果 无论每个小盒子本身高度是否一致比如文字多的盒子更高它们都会在容器垂直方向正中间对齐。baseline 则让所有盒子的第一行文字底部线对齐即使盒子高度不同。3.5 align-content —— 多行货物整体如何分布这是进阶但极易混淆的一点 align-content 只有在多行或多列时才会生效也就是必须配合 flex-wrap: wrap或 wrap-reverse且内容真的换成了多行。它控制的是多根主轴多行在交叉轴方向上的整体对齐和间距。简单说align-items 管同一行里每个货怎么摆align-content 管行与行之间怎么摆。如果只有一行align-content 设了也没用。它的值很多和 justify-content 类似但作用在交叉轴上stretch默认每行拉伸均匀填满交叉轴空间。flex-start所有行挤在交叉轴起点。flex-end挤在终点。center所有行整体居中。space-between第一行贴顶最后一行贴底中间行均匀分布。space-around每行上下间距相等边缘空间是行间距的一半。space-evenly所有行间距完全相等包括到顶和到底。.container{display: flex;flex-wrap: wrap;/* 必须换行 */.navbar{display: flex;/* 主轴上两端对齐logo贴左链接贴右 */ justify-content: space-between;/* 交叉轴垂直居中让 logo 和菜单项高度不一也能对齐 */ align-items: center;background-color:#2c3e50;padding:020px;height: 60px;}.nav-links{display: flex;/* 菜单内部也用flex让 li 水平排列 */ list-style: none;gap: 20px;/* 现代浏览器支持的间距属性相当好用 */}.nav-links li{color: white;cursor: pointer;}.logo{color:#f1c40f;font-weight: bold;font-size:1.5em;}align-content: center;/* 让多行在容器垂直方向居中 */ height: 300px;/* 足够高才能看出效果 */}.item{width:40%;/* 让一行放不下三个强行换行产生两行 */}实战练习navclassnavbardivclasslogo MySite/divulclassnav-linksli首页/lili课程/lili关于/li/ul/nav