开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情
Flexbox布局中的对齐方式
在Flexbox中提供了多个用于对其Flex项目以及Flex项目之间分配空间的属性，这些属性可以分为两组：
空间分配属性和对齐属性。
用于设置flex容器空间分配的有：
justify-content： 沿Flex容器的主轴方向分配Flex容器的剩余部分
align-content: 沿Flex容器的侧轴方向分配Flex容器的剩余部分
place-content：它是justify-content和align-content的简写属性
用于设置flex容器对齐的属性有:
align-self： 沿Flex容器侧轴对齐单个Flex项目
align-items： 将所有Flex项目作为一个组，沿Flex侧轴对齐
在选择这些属性前，你需要知道：
1，对齐方向（Flex容器的主轴方向通常是水平方向，否则也是内联轴方向，侧轴通常是垂直方向，否则也是块轴方向）
2，布局要对齐什么（所有flex项目，单个flex项目或是flex项目之间的内容）
需要注意的就是flex容器的主轴和侧轴方向是可以改变的，flex容器上flex-direction,CSS的书写模式writing-mode属性，CSS阅读模式direction和HTML元素的dir属性都可以改变，另外，在Flexbox布局中是没有justify-self属性的
Flex项目彼此相邻，因为Flexbox是一个单维布局，所以Flex布局要么按行对齐，要么按列对齐（默认按行对齐），并且Flex项目换行之后，也是在自己所在行的主轴方向排列。
沿主轴分配空间
在没有设置任何对齐方式的情况下，flex项目在主轴上排成一行，并且如果所有flex项目的宽度小于flex容器的宽度，就会有一段剩余空间未填满，这是因为justify-content的初始值为flex-start,所有的flex项目都靠近主轴的起点位置。所以我们可以改变justify-content的值来改变对齐方式，即调整剩余空间的位置。
justify-content的取值有:
flex-start: 主轴起点对齐
flex-end：主轴终点对齐
center： 主轴居中对齐
在Flexbox布局中，我们也经常使用justify-content：center; 来实现水平居中的布局效果
space-around： 第一个flex项目与主轴起点的距离和最后一个flex项目与主轴末尾的距离相等，并且是其他fle项目之间距离的一半，当flex项目只有一个时，其效果与center相等
space-between： flex项目平均分配，所有flex项目之间距离相等，并且第一个和最后一个flex项目分别与主轴起点和终点吻合，flex项目只有一个时，其效果与flex-start等同
space-evenly： 第一个flex项目与主轴起点的距离和最后一个flex项目与主轴末尾的距离相等，并且等于其他flex项目之间的距离，当flex项目只有一个时，其效果与center相等
除了上述取值外，还可以用start(等同于flex-start),end(等同于flex-end),CSS的关键词inherit、initial、revert和unset也可以用于justify-content的属性
如果flex容器没有额外的剩余空间，或者说剩余空间为负值时，justify-content的属性值会与上面有差异
flex-start会让 Flex 项目在 Flex 容器主轴终点处溢出 ；
flex-end会让 Flex 项目在 Flex 容器主轴起点处溢出；
center会让 Flex 项目在 Flex 容器两端溢出；
space-between和flex-start相同；
space-around和center相同；
space-evenly和center相同；
start和flex-start相同；
end和flex-end相同。
上面这种是justify-content作用于行的效果，也就是flex-direction为row，那通过设置flex-direction的值为column时的效果来看，其实，不管flex-direction取值什么，justify-content属性只作用于Flex主轴上，只不过，当flex-direction取值为column时，需要给flex容器设置height或block-size，这样，才能让flex容器有一定的剩余空间，这是因为CSS在计算块容器（flex容器）高度时，默认以其内容或所有后代元素高度来计算
沿侧轴分配空间
沿侧轴分配空间，又可以看作是 Flexbox 布局中多行（或多列）的对齐方式 ！
在Flex布局中，如果flex容器没有足够多的空间来容纳flex项目时，且flex容器上显式设置了flex-wrap的值为wrap（或wrap-reverse）时，flex项目就会换行
因为align-items属性的初始值为stretch，所有flex项目在侧轴上拉伸，flex项目高度填充了flex容器侧轴空间，并且每行的flex项目高度相等
如果在flex项目上显式设置了高度 ，即使align-items的值为stretch,也不会拉伸flex项目，这时候，相邻两行之间就会有剩余空间
.container {
display: flex;
flex-wrap: wrap;
width: 500px;
height: 300px;
border: 1px solid #c42b1c;
}
.item {
width: 88px;
height: 88px;
border: 1px solid #259644;
}
这时如果想分配剩余空间，就可以使用align-content属性，align-content与justify-content相比多出了一个stretch值，他们的作用是相同的，不同的是align-content是设置侧轴方向的剩余空间
如果未设置flex项目的高度，那么改变align-content的值，flex项目的高度会作出改变，即是flex项目内容的最大高度
align-contents属性同样受flex-direction的影响，其基本和justify-content一样。
如果要在布局的时候，需要同时设置align-content和justify-content两个属性的话，也可以使用它们的简写place-content,比如：
.container {
justify-content: center;
align-content: center;
}
//等同于
.container {
place-content:center;
}
place-content可以接受一个值，也可以接受两个值，一个值时，则表示这个属性是相同的值，两个值时，第一个值是align-content的值，第二个是justify-content的值
所以当我们在布局中，要构建一个水平垂直居中的效果就可以使用place-content: center;
需要注意的是，align-content只有当flex-wrap的值不为nowrap（即wrap或wrap-reverse）时才生效
沿侧轴对齐Flex项目
沿侧轴对齐 Flex 项目，指的是 Flex 容器中单行（或单例）以及单个 Flex 项目的对齐方式 ！
在构建Web布局时，总有不需要断行的状态，此时，要控制flex项目在侧轴的对齐方向，就不能使用align-content属性，这时就可以使用align-items或align-self来控制整行flex项目，或单个flex项目在侧轴的对齐方式:
align-items用于 Flex 容器上，控制 Flex 行（所有 Flex 项目所在行）在侧轴上对齐方式；
align-self用于 Flex 项目上，控制单个 Flex 项目在侧轴上对齐方式。
Flexbox中的溢出对齐
在使用CSS构建Web页面时，容器会根据内容自动扩展到右侧或底部，当内容溢出时，容器会变为可滚动的，用户就可以滚动来查看不可见的内容，除非在容器上使用overflow: hidden,禁止容器因内容溢出而出现滚动条的行为。
但在Flexbox中却无法保证这一点，如果内容溢出，你就不能滚动到该区域。在这种情况下，就可以定义“安全对齐”。就是给对齐属性新增了safe和unsafe两个属性
“安全”对齐会在溢出情况下更改对齐模式，以避免数据丢失
safe关键字会将因为对齐方式导致溢出时，将设置的对齐模式切换到start对齐模式下，目的是避免“数据丢失”，其中部分项目超出对齐容器的边界并且无法滚动到。
unsafe，即使会导致此类数据丢失，也会遵守对齐方式。
