Flex 弹性布局：justify-content 属性及其取值详解

Flex 弹性布局是现代 CSS 布局方案，给父元素设置display: flex即可开启弹性布局。开启后容器内所有子元素都会变为弹性项目，无需复杂的浮动、定位组合，就能轻松完成元素的排列与定位。
Flex 布局大幅简化了自适应界面开发，页面能够适配手机、平板、电脑等任意尺寸屏幕。
弹性布局核心特性

1. 双轴体系：主轴与交叉轴
   每一个弹性容器都存在两条相互垂直的轴线：
   主轴（main axis）：默认水平从左向右延伸；
   交叉轴（cross axis）：垂直于主轴，纵向分布。
   Flex 所有元素对齐规则，全部围绕这两条轴线实现。
2. 弹性容器
   给父元素设置display: flex或display: inline-flex，父元素就会转换为弹性容器，承载内部弹性项目。
3. 弹性项目（子元素）
   弹性容器的每一级直接子元素，都会自动成为弹性项目。我们可以单独为每个项目设置尺寸、排列顺序、双轴对齐方式，互不干扰。
4. 主轴对齐
   容器内剩余空白空间，可以通过justify-content属性，沿主轴分配给各个项目；项目也能按比例自动拉伸填充空间。
5. 交叉轴对齐
   align-items属性控制元素在交叉轴上的垂直对齐，支持顶部对齐、底部对齐、居中对齐等效果。
6. 自动换行与尺寸自适应
   可以设置项目空间不足时自动换行，同时支持元素宽度跟随容器剩余空间自动缩放。
   justify-content 各取值详细解析
   justify-content专门控制弹性项目在主轴上的对齐方式，共 5 种常用取值：
   1.flex-start（默认值）
   所有项目紧贴主轴起点（容器左侧），剩余空白全部留在最后一个项目右侧。不写 justify-content 时默认生效。justify-content: flex-start;
   2.flex-end
   所有项目紧贴主轴终点（容器右侧），空白空间全部堆积在第一个项目左侧。justify-content: flex-end;
   3.center
   一整组弹性项目整体居中放置，项目组左右两侧的空白间距完全相等。justify-content: center;
   4.space-between
   两端对齐：第一个项目贴容器左边界，最后一个项目贴容器右边界；所有剩余空白均匀分布在相邻项目之间，容器左右边缘无留白。justify-content: space-between;
   5.space-around
   每个项目左右两侧分配同等空白间距。因此相邻两个项目中间的间隔，是项目到容器边框间距的两倍. justify-content: space-around;

justify-content是 Flex 弹性布局核心属性之一，五种取值可以快速实现各类水平对齐需求，不需要额外辅助 CSS 类和固定边距。凭借简单灵活的特性，Flex 布局广泛应用于现代网页：导航栏、商品卡片、标题栏、各类自适应界面模块都依靠它实现。