一、引言
在现代网页和移动应用开发中，良好的布局是确保用户体验的关键因素之一，想象一下，你正在装修自己的小窝，房间里的家具摆放位置是否合理，直接决定了你在屋子里活动是否方便舒适，而在数字世界里，元素的布局就如同这些家具的摆放，Flex（弹性盒子）就是那个超级好用的“室内设计师”，它能让你轻松地将页面中的各个元素安排得井井有条，我们将一起走进Flex的世界，通过这份详细的培训指南，帮助你从零开始，逐步掌握这个强大的布局工具。
二、Flex的基本概念
（一）什么是Flex
Flex是一种用于为容器内的项目提供最大灵活性的CSS布局模式，它就像是一个魔法盒子，你可以把各种不同的东西（HTML元素）放进去，然后通过一些简单的指令（CSS属性），让它们按照你的意愿排列组合，我们有一个装满不同大小玩具的盒子，想要整齐地展示出来，Flex就能像一位贴心的助手，根据盒子的空间和玩具的特性，快速找到最佳的排列方式。
（二）容器与项目
1、容器
- 在Flex布局中，首先需要确定一个容器元素，例如<div>标签，这个容器就像一个舞台，所有被布局的元素都要在这个舞台上表演（也就是被放置在这个容器里），我们可以给这个容器添加display: flex;样式，这就相当于告诉浏览器：“嘿，这个容器要使用Flex布局了哦。”
2、项目
- 容器里的子元素被称为项目，它们就像演员一样，在舞台上按照导演（Flex布局规则）的要求进行表演，比如在一个<ul>无序列表里，<li>列表项就是项目，当我们将<ul>设置为Flex容器时，所有的<li>就会遵循Flex布局规则来排布自己。
三、主轴与交叉轴
（一）主轴
1、默认情况下，主轴是水平方向从左到右（对于大多数语言的文本阅读顺序），可以把它想象成一条无形的线，贯穿整个Flex容器，如果你把Flex容器比作一条马路，主轴就像是这条路的方向，规定了项目沿着哪个方向前进。
2、我们可以通过flex - direction属性来改变主轴的方向，常见的值有：
row：默认值，主轴为水平方向，从左到右。
row - reverse：主轴为水平方向，从右到左，这就像我们改变了马路的行驶方向，原本从左往右走的人现在要从右往左走。
column：主轴为垂直方向，从上到下，这时候，我们的Flex容器就像一座高楼，项目从上到下依次排列。
column - reverse：主轴为垂直方向，从下到上。
（二）交叉轴
1、交叉轴是与主轴垂直的轴，如果主轴是水平的，那么交叉轴就是垂直的；如果主轴是垂直的，交叉轴就是水平的，它就像是主轴旁边的一个小伙伴，一起决定着项目的排列方式。
2、对于主轴为水平方向（row或row - reverse）的情况，默认的交叉轴是从上到下；对于主轴为垂直方向（column或column - reverse）的情况，默认的交叉轴是从左到右。
四、Flex容器属性
（一）flex - wrap
1、当项目总尺寸超过容器尺寸时，flex - wrap属性就起作用了，它的默认值是nowrap，这意味着项目会尽可能地在一行（或一列，取决于主轴方向）内显示，即使超出了容器的宽度（或高度），项目可能会被缩小或者超出部分被隐藏。
2、如果我们将其设置为wrap，那么当项目太多放不下时，项目就会自动换行（或换列），这就像是在一个有限的场地里安排座位，当人数太多时，我们会让他们坐到后面的几排椅子上去。
3、还有一个值是wrap - reverse，它会使项目反向换行（或换列），想象一下，原本是从左到右换行，现在变成了从右到左换行，给人一种独特的视觉效果。
（二）justify - content
1、这个属性是用来控制项目在主轴上的对齐方式的，它有很多实用的值：
flex - start：项目位于主轴的起点，就像排队的时候，大家都站在队伍的最前面。
flex - end：项目位于主轴的终点，与flex - start相反，大家站到了最后面。
center：项目居中对齐，无论主轴有多长，项目都集中在中间的位置。
space - between：项目之间的间隔相等，并且第一项和最后一项分别贴紧主轴的起点和终点，这就好比在一个长长的走廊里摆桌子，两端的桌子靠着墙，中间的桌子均匀分布。
space - around：每个项目两侧的间隔相等，但第一项和最后一项的两侧间隔只有一半，这种对齐方式使项目看起来更加宽松和自然。
（三）align - items
1、align - items属性控制项目在交叉轴上的对齐方式，它是针对所有项目的整体对齐设置。
stretch：这是默认值，项目会在交叉轴上拉伸以填满容器的高度（或宽度），就像给一块橡皮泥放在一个盒子里，它会尽量填满盒子的空间。
flex - start：项目位于交叉轴的起点，如果是垂直方向的交叉轴，项目就会贴着容器的顶部（对于row主轴方向）或左边（对于column主轴方向）。
flex - end：项目位于交叉轴的终点，与flex - start相反。
center：项目居中对齐在交叉轴上。
五、Flex项目属性
（一）order
1、order属性可以改变项目在容器中的排列顺序，默认情况下，项目的排列顺序是由它们在HTML代码中的先后顺序决定的，但是有时候我们需要调整顺序，比如把一个重要的按钮移到最前面。
2、假设我们有三个项目A、B、C，它们的默认order值都是0，如果我们把B的order值设置为 - 1，那么B就会排在A和C的前面；如果把C的order值设置为1，它就会排在后面。
（二）flex - grow
1、flex - grow定义了项目的放大比例，当容器有剩余空间时，项目可以根据这个比例来分配额外的空间，假设我们有两个项目A和B，它们的flex - grow值分别为2和1，如果容器还有足够的空间，那么A就会获得2份空间，B获得1份空间。
2、这就像两个小朋友分蛋糕，如果规定了一个小朋友可以吃两块，另一个小朋友只能吃一块，当有足够多的蛋糕时，他们就会按照这个比例分配。
（三）flex - shrink
1、flex - shrink定义了项目的缩小比例，当容器空间不足时，项目会根据这个比例缩小，如果有三个项目A、B、C，它们的flex - shrink值分别为3、2、1，当容器空间不够时，A会先缩小，而且缩小的比例比B和C大。
2、这有点像在拥挤的电梯里，比较灵活的人（flex - shrink值大的项目）会更主动地收缩自己的身体（缩小自身尺寸），以适应狭小的空间。
（四）flex - basis
1、flex - basis定义了项目在主轴上的初始大小，它可以是一个具体的数值（如100px），也可以是百分比（如50%），还可以是关键字auto（表示使用项目本身的内容宽度或高度作为初始大小）。
2、如果把项目比作一个个气球，flex - basis就像是最初吹气球时给它定下的大小，后续根据容器空间和其他Flex属性的设置，气球（项目）的大小可能会发生变化，但这个初始大小是很重要的参考依据。
六、实际案例应用
（一）创建一个响应式导航栏
1、HTML结构
<nav class="navbar">
<a href="#" class="nav - link">首页</a>
<a href="#" class="nav - link">产品</a>
<a href="#" class="nav - link">服务</a>
<a href="#" class="nav - link">联系我们</a>
</nav>2、CSS样式
.navbar {
display: flex;
justify - content: space - around;
}
.nav - link {
padding: 10px;
text - decoration: none;
color: black;
} - 我们将<nav>元素设置为Flex容器，justify - content: space - around;使导航
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
李焱
这家伙太懒。。。
- 暂无未发布任何投稿。
