从零开始的Flex布局掌握
前言
在现代网页设计中，布局是一个至关重要的环节，在过去的一段时间里，页面的布局还都是通过table、float、定位以及其他的 CSS 属性来完成的，随着用户需求的不断变化和设备种类的多样化，旧的布局方式难以满足各种场景的需求，Flex的出现很大程度地缓解了这种现象，这是一种非常强大的布局工具，可用于实现各种复杂的网页布局及响应式设计
Flex布局
Flex，全称为Flexible Box，意为弹性布局，是CSS3的一种布局模式，可用于设计灵活的响应式布局
Flex是在2009年，由W3C提出的，作为CSS3规范的一部分，最早的Flex规范被称为"Box Alignment for User Interface Layout"，随后经历了多个版本的修改和改进，在2012年基本成型，最终在2017年定稿并成为W3C的正式推荐标准
其兼容性如下(几乎主流的现代化浏览器均支持)：
基本概念
任意元素都可使用Flex布局，只需设置display属性为flex或inline-flex即可，如：
采用Flex布局的元素，可称为Flex容器(flex container)，作为父元素，其内的所有直接子元素自动转换为Flex项目(flex item)
轴
Flex项目的主要根据Flex容器的两根轴进行排列和对齐
主轴(Main Axis)
是Flex容器中定义的主要布局轴，默认情况下，主轴是水平向右的，Flex项目会从左到右排列，其在主轴上占据的尺寸称为主尺寸(main size)
交叉轴(Cross Axis)
是与主轴垂直的轴，默认情况下，交叉轴是垂直向下的，交叉轴的方向取决于主轴的方向，Flex项目在交叉轴上占据的尺寸称为交叉尺寸(cross size)
容器属性
下列属性主要应用于Flex容器上
flex-direction
flex-direction属性可以改变主轴的方向，即决定Flex项目的排列方向
常见的flex-direction值包括：
row：(默认值)水平，从左到右row-reverse：水平，从右到左column：垂直，从上到下column-reverse：垂直，从下到上
justify-content
该属性主要决定项目在主轴上的对齐方式，可能值如下：
flex-start：(默认值)从主轴起点开始排列flex-end：从主轴终点开始排列center：在主轴上居中排列space-between：项目之间平均分布，项目之间的间隔相等space-around：项目之间的间隔相等，项目两端的间隔为项目之间间隔的一半space-evenly：项目之间和项目两端的间隔相等
align-items
该属性主要决定项目在交叉轴上的对齐方式
stretch：(默认值)如果项目未设置高度或设置为auto，则将其拉伸以填满容器flex-start：从交叉轴起点开始排列flex-end：从交叉轴终点开始排列center：在交叉轴上居中排列baseline：根据项目的文本基线对齐(适用于包含文本的项目)
flex-wrap
默认情况下，所有项目都按主轴排列为一行，不允许换行，flex-wrap用于决定当一行容不下时，如何换行，可能值有：
nowrap：(默认值)所有项目都在一行上排列，不换行wrap：项目在必要时换行，新行在下方wrap-reverse：项目在必要时换行，新行在上方
align-content
该属性用于控制多行项目在交叉轴上的对齐方式，只在多行布局有效，即当 flex-wrap 属性设置为 wrap 或 wrap-reverse 时才会生效，其常见可能值为：
stretch：(默认值)多行项目在交叉轴上拉伸以填充整个容器的高度flex-start：多行项目在交叉轴的起点对齐flex-end：多行项目在交叉轴的终点对齐center：多行项目在交叉轴上居中对齐space-between：多行项目在交叉轴上均匀分布，首行和末行与容器的起点和终点对齐，行与行之间的间隔相等space-around：多行项目在交叉轴上均匀分布，行与行之间的间隔相等，首行和末行与容器的起点和终点的间隔是间隔的一半
flex-flow
该属性是flex-direction和flex-wrap的简写形式，默认值为row nowrap，形式如下：
项目属性
下列属性主要应用于Flex项目上
order
该属性定义项目的排列顺序；数值越小，排列越靠前，默认为0
如上图，HTML结构中三个项目按1、2、3顺序书写，但实际渲染则是按order数值从小到大的顺序显示
flex-grow
该属性定义项目的放大比例，接收正整数数值，默认为0，即不放大
当容器存在剩余空间时，会将剩余空间按设置了flex-grow值的项目按其值的比例分配给这些项目
如上图，正常情况下排列，当容器空间富裕时，会有剩余空间，默认不分配(不做处理)
当项目2设置了flex-grow值后，容器会将剩余空间分配给项目2
当项目3设置了flex-grow值为2后，容器会将剩余空间按1:2的比例分配给项目2和项目3
flex-shrink
该属性用于定义项目的缩小比例，默认为1，即如果空间不足，项目将被压缩
如果容器中的项目总宽度超过容器的宽度，那么根据各自的flex-shrink值，项目会以一定的比例进行被压缩
值为 0： 项目不会被压缩，始终保持初始尺寸，即使容器空间不足正整数值： 项目会根据这个值进行比例收缩
如上图，当项目数量不多时，容器空间有富余，项目正常显示
当项目数量较多时，项目宽度按比例被压缩
当flex-shrink值设为0后，则项目不会被压缩，依旧按原宽度显示，甚至超出容器
flex-basis
该属性用于设置项目的初始主尺寸(main size)，定义了项目在未进行放大或缩小之前，占据的空间大小，值可以是数值(如 px、%、em 等)或 auto(默认值)
如上图，设置项目3的flex-basis值为50%，在容器空间富余情况下，项目3占据容器50%的空间
flex
该属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto；后两个属性可选(即只设置一个值时，其为flex-grow属性的值)
其形式如下：
align-self
该属性用于设置单个项目使用与其他项目不一样的对齐方式(在交叉轴上的对齐方式)，可覆盖align-items属性
auto：(默认值)表示继承容器的align-items属性stretch：项目在交叉轴上拉伸以填充容器flex-start：项目在交叉轴的起点对齐flex-end：项目在交叉轴的终点对齐center：项目在交叉轴上居中对齐baseline：项目在交叉轴上的基线对齐，即项目的文本基线对齐
特点
一维布局： Flex主要应用于单行或单列上的布局，通过设置主轴和交叉轴来控制元素的排列方式
自适应和响应式设计： Flex设计目的之一是帮助开发者创建响应式布局，适应不同尺寸的屏幕和设备，使网页在移动设备和桌面上均能良好显示
顺序控制： 通过order属性可以轻松改变项目的显示顺序，不必改变 HTML 结构，从而更加灵活地管理页面布局
弹性适应： 使用flex-grow和flex-shrink属性可以控制项目在空间不足或有多余空间时的弹性表现
对齐和分布控制： 通过justify-content和align-items可以精确控制元素在主轴和交叉轴上的对齐方式，如居中、靠边、分布等
使用场景
Flex适用于许多不同的场景和布局需求，特别是对于那些需要灵活性和响应式设计的项目，以下列举一些典型的使用场景：
导航菜单和工具栏： 使用Flex可以轻松实现水平或垂直导航菜单，项目的自动对齐和间距控制使得设计更加简洁和一致网页布局的各种部分： 无论是页头、页脚还是内容区域，Flexbox都能提供灵活的布局控制，适应不同尺寸的屏幕和设备卡片式布局： 需要展示多个卡片或面板并希望它们在同一行或列上均匀分布时，Flexbox提供了理想的解决方案响应式设计： 由于Flex的自适应性，特别适合构建响应式设计的布局，使得网页能够在不同尺寸和设备上都有良好的显示效果表单布局： 在表单设计中，Flex可以帮助将表单元素对齐并有效地利用空间，提升用户体验和操作效率页面组件的排列： 如页眉、页脚、侧边栏等页面组件的布局，Flex可以使得这些组件在各种屏幕尺寸下都能优雅地展示和布局垂直居中： 使用Flex可以轻易地实现垂直居中的效果
总体来说，Flex是一种功能强大且易于使用的布局模型，适用于不同的设计和开发场景，在现代化的项目构建中，多用Flex布局，能够显著简化布局的实现和维护工作
