CSS的Flexbox布局是实现响应式布局的标准之一。它弥补了传统布局的不足，可以灵活地控制容器内元素的对齐及其空间分配，减少了使用float和position等属性的繁琐精细的计算，提高了页面布局的效率。
Flexbox让网页开发者可以用极简、高效的代码创作出丰富、流畅的布局，进一步升华网站的美学风格，节省开发时间，提高工作效率。
在本文中，我们将讨论在Flexbox布局中使用修改器实现偏移和对其的方法，同时提供实际的示例代码进行演示。
了解CSS Flexbox
在学习CSS Flexbox之前，先来了解一下它的三个概念：主轴、交叉轴和flex项。
- 主轴（Main Axis）：一个Flexbox中的项目沿着主轴排列，默认为水平方向。
- 交叉轴（Cross Axis）：垂直于主轴的轴线。
- flex项：在Flex容器中单个、可伸展的项目。
Flexbox布局下，Flex容器的主要属性有：
- display：指定Flex容器
- flex-direction：指定项目沿主轴方向排列
- justify-content：定义主轴上的对齐方式
- align-items：定义交叉轴上的对齐方式
- align-content：定义多轴对齐的行为
而Flex容器中flex项的主要属性有：
- flex-grow：项目在主轴上的增长因子
- flex-shrink：项目在主轴上的收缩因子
- flex-basis：项目在主轴上的初始大小
- flex：将flex-grow、flex-shrink和flex-basis三个属性设置在一个声明中
CSS Flexbox中的偏移和对齐
偏移和对齐在flex布局中非常常见，而修改器是实现它们的便捷方法。我们可以通过它们轻松地移动flex项，固定位置，垂直居中、水平居中等操作，使布局更加的灵活多变。
偏移
主轴偏移
在主轴上，通过设置margin属性值为auto实现flex项在容器中自适应居中。
.container {
display: flex;
}
.center {
margin-left: auto;
margin-right: auto;
}交叉轴偏移
在交叉轴上，通过使用align-items属性，将容器内的flex项垂直居中。
.container {
display: flex;
align-items: center;
}对齐
在CSS Flexbox布局中，对齐控制着子元素在父容器中的位置。对齐在很多情况下都是非常有用的，例如一个页面中的水平居中项目或者垂直居中项目。
主轴对齐
- justify-content:center：将flex项在主轴上居中。
- justify-content:flex-end：将flex项在主轴上右对齐。
- justify-content:flex-start：将flex项在主轴上左对齐。
- justify-content:space-between：平均分配空间，flex项之间保留的空白空间相等。
- justify-content:space-around：平均分配空间，flex项周围保留同等量的空白空间。
.container {
display: flex;
justify-content: center;
}交叉轴对齐
- align-items: center：使flex项在容器内垂直居中。
- align-items: flex-start：强制所有子项目垂直对齐容器的顶部。
- align-items: flex-end：将所有flex项从容器的底部对齐。
- align-items: stretch：让flex项的高度等于容器的高度。
- align-items: baseline：flex容器内的文本的基线与容器的基线对齐。
.container {
display: flex;
align-items: center;
}示例
下面的代码演示了如何使用CSS Flexbox，使用修改器如居中、偏移等方式对flex项进行操作。
-- -------------------- ---- ------- --------- ----- ------ ------ ------ --------------- -- --------------- -------------- -------- --- - -------------- ----------- ---------- -- ----------- -- --- ------- ---- - ---------- ----- ------------- ------ --- ------------ - ----------- ----- ------------------ ------- ---------- ----- ------------------- ------- --------------- ------- --- ------ - --------- ------ ---------- ------ ---------- ----- ----------- ----- ------------------- ------- --------------- ------- ------------- ----- --------------- ----- --------- ----- -------------------- -------- ----------------- ---- -------------- - --- ---- ---- -------- --- --------- - --------------- ----- ---------------- ----- --- -------- - --------------- ----- --- ------ - -------------- ----------- --- --------- - -------------- --------- --- ---------------- - ------------------- -------------- --- --------------- - ------------------- ------------- --- --------- ------- ------ ----- ------------------ ------ --------------- ------- ------ ---------- ----------- ------- ------ ---------- ---------- ------- ------ ---------- -------- ------- ------ ---------- ----------- ------- ------ ---------- ------------------ ------- ------ ---------- ------------------ ------- ------ ---------- ------------------ ------- ------- ------- -------
在此示例中，我们将演示CSS Flexbox布局如何使用修改器实现偏移和对齐。容器是一个flex容器，通过flex-direction:column设置其块级布局。其高度佔据了视窗的100%。
.box是flex项，每个div元素都使用了相同的样式。这里我们设置了每个div元素的宽度和高度以及背景颜色、阴影等属性。
我们为每个box添加了偏移和对齐的修改器的class，如.center、.right、.top、.bottom等类，用于修改box在容器中的位置、对其方式。
最后，效果如下：
结论
CSS Flexbox布局简化了页面布局的代码，能够灵活地让容器内的元素在一个平面上进行对其。借助CSS Flexbox的偏移和对齐修改器，我们可以迅速地实现灵活的布局。这篇文章中，我们提供了对CSS Flexbox修改器行为的简要介绍和一些简单的案例，希望能够有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f616e0c5c563ced57f7f2f