搬运总结：flex 弹性布局归纳，解决CSS垂直居中问题

搬运总结：flex 弹性布局归纳，解决CSS垂直居中问题

本文参考：

• https://juejin.cn/post/6844903474774147086#heading-1

• http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

两篇文章整理而成

推荐一个非常不错的布局课程：

• https://www.bilibili.com/video/BV1ov411k7sm?p=7&spm_id_from=pageDriver

前言

一些常见，较为普通的布局模式主要依赖display属性+position属性+float属性，但倘若要实现一些特殊的布局，这种传统的布局方式实现起来就不是很方便。比如开发中常遇到的垂直居中布局。但flex布局具有很强的灵活性，任何一个容器都可以指定flex布局，连行内元素也可以使用flex布局。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

✅ 解决开发中垂直居中的问题

#父元素 {
    display: flex;
    justify-content: center; // 定义如何沿着主轴方向（X轴）排列子容器
    align-items: center // 用于定义如何沿着交叉轴（Y轴）方向排列子容器
}

justify-content：设置子容器沿主轴（X轴）方向排列

常用属性：

flex-start：起始端对齐

flex-end：末尾段对齐

center：居中对齐

space-around：

子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。

space-between：

子容器沿主轴均匀分布，位于首尾两端的子容器与父容器贴合。

align-items：设置子容器如何沿交叉轴（Y轴）排列

flex-start：起始端对齐

flex-end：末尾段对齐

center：居中对齐

baseline：基线对齐

stretch：拉伸对齐

align-content：多行沿交叉轴对齐

align-items是将每一行视为一个整体来处理的，相对于align-items，align-content是将多行视为一个整体来进行对齐的。

flex-start：起始端对齐

flex-end：末尾段对齐

center：居中对齐

space-around：等边距均匀分布

space-between：等间距均匀分布（顶、底贴合父容器）

stretch：拉伸对齐

如何定义盒子中主轴和交叉轴的方向？

向右：flex-direction: row （默认值）

向左：flex-direction: row-reverse

向下：flex-direction: column （默认值）

向上：flex-direction: column-reverse

如何定义父容器中的换行方式 flex-wrap

flex-wrap有3个值，分别是nowrap，wrap，wrap-reverse

nowrap：不换行

wrap：换行

wrap-reverse：逆序换行

设置子容器的基准大小：flex-basis

flex-basis为容器设置不伸缩（压缩）情况下的默认尺寸。当主轴为横向时代表宽度，主轴为纵向时代表高度。
⚠️ 在主轴为横向时，设置了flex-basis后，width将会失效

设置子容器弹性伸展的比例：flex-grow

如图，在子容器基准大小为300px的情况下，将剩余空间划分为6份，1份分给第一个盒子，2份分给第二个盒子，3份分给第三个盒子

设置子容器弹性收缩的比例：flex-shrink

设置排列顺序：order

改变子容器的排列顺序，覆盖 HTML 代码中的顺序，默认值为 0，可以为负值，数值越小排列越靠前。