近几年，CSS领域出现了一些复杂的专用布局工具，用以代替原有的诸如使用表格、浮动和绝对定位之类的各种变通方案。Flexbox，或者说是弹性盒子布局模块（Flexible Box Layout Module）是这些新布局工具中的第一个，接着是CSS网格布局模块（CSS Grid Layout Module）。我们会在本文给出一个易于理解的flexbox入门介绍。
随着CSS网格布局的引入，你可能会问flexbox布局是否真的还有必要。虽然它们所能做的事情有一些重叠，但其各自在CSS布局中有着非常特别的目的。一般来说，flexbox在一维场景（比如，一串类似的元素）下有最佳应用，而网格是二维场景下理想的布局方案（例如整个页面的元素）。
即便如此，flexbox仍可以用于整个页面的布局，这样它能为那些还不支持网格布局的浏览器提供合适的兼容处理。（必须承认，网格布局正在大多数现代浏览器中快速得到支持，不过对flexbox的支持仍然更为广泛，所以如果你想让你的布局在稍微老旧的浏览器中也生效，使用flexbox作为网格布局的降级方案是很容易的）。
使用Flexbox的好处
flexbox的一些好处是：
-
页面元素能被任意方向地放置（靠左、靠右、从上往下甚至从下往上）
-
布局内容的可视顺序能够被反转或重排
-
元素大小能“弹性”适应可用空间，并根据容器或者兄弟元素进行相应地对齐
-
能轻松实现等列宽布局（与每一列里面的内容无关）
为了阐述其多样的属性和可能性，让我们假设下面有这样的布局用例：
<div class="example">
<header>
header content here
</header>
<main class="main">
<nav>
nav content here
</nav>
<div class="content">
main content here
</div>
<aside>
aside content here
</aside>
</main>
<footer>
footer content here
</footer>
</div>
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路
首先，是把元素一起放进.main里，比如，
让flexbox来救场吧。
让我们Flex
flexbox的要点是出现在display属性上的flex值，它需要被设置在容器元素上。如此设置会让它的子元素变成“弹性项目（flex item）”。这些弹性项目拥有一些易于使用的默认属性。比如，它们被紧挨着放置，那些没有特别指明宽度的元素自动占满了剩余的空间。
因此，如果你给.main设置了display:flex，它的子元素.content就被自动挤在
.main {
display: flex;
}
请查看下面的例子，包含了所有的细节
项的顺序：Flebox的order属性
另外一个flexbox的能力，是能够轻松改变元素的显示顺序。让我们假设你为一个客户制作了上面的布局，而她现在想要.content出现在
通常，你需要深入到HTML源码中去，在那里改变元素的顺序。而有了Flexbox，你可以完全使用CSS完成这项任务。只需把.content的order属性设置为-1，那么这一列就会出现在前面，这本例就是最左边。
.main {
display: flex;
}
.content {
order: -1;
}
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路
本例中，你不需要改变其他列的order。例子在flexbox-demo-2。
如果你倾向于显式地为每一列指定order，你可以将.content的order设为1，把
HTML源码独立于CSS的Flexbox样式
但你的客户并不满足。她想让
因为
.example {
display: flex;
flex-direction: column;
}
footer {
order: -1;
}
所以，如果你想把一行元素修改为一列，或者相反，你可以使用flex-direction属性，并设置它相应地为column或row（row是默认值）。
然而，强大的能力也到来了更多的责任：谨记，一些用户可能会使用键盘来导航你的基于flexbox的网站，如果你HTML源码中元素的顺序和屏幕上显示的有所出入，那么无障碍访问的能力就成为需要认真对待的问题。
如何在Flexbox中对齐子项
Flexbox能非常直观地处理子项的水平对齐和垂直对齐。
你可以使用align-items对flex容器中的所有子项设置统一的对齐。如果你想给个别元素设置不同的对齐方式，使用align-self。元素的对齐方式跟它所在父容器的flex-direction有关。如果它的值是row（意味着元素水平排列），对齐方式是指在垂直轴上。如果flex-direction被设置为column（意味着元素垂直排列），对齐方式就是指在水平轴上。
例如，你让一些元素在容器中分别有不同的对齐方式，你需要：
#设置每个元素的align-self属性为合适的值。可能的值有：center，stretch（元素撑满它的容器），flex-start，flex-end和baseline（元素被放置在父容器的baseline上）
#把容器元素设置为display:flex
#最后，注意父容器的flex-direction属性，因为它关系到子元素的对齐方式。
.example {
display: flex;
flex-direction: column;
}
.red {
align-self: center;
}
.blue {
align-self: flex-start;
}
.pink {
align-self: flex-end;
}
试试在下面的例子中，把父容器的flex-direction在row和column之间切换，看看它们引起的实时变化。
如果想要容器中所有的元素有统一的对齐方式，你可以在容器上使用align-items。可以的值有center，flex-start，flex-end，stretch（默认值：子项被拉伸以适应它们的容器）和baseline（子项被放置在父容器的baseline上）。
.example {
display: flex;
align-items: center;
}
像往常一样，试着把父容器的flex-direction在row和column之间切换，看看它们如何影响着你设置align-items值时所发生的作用。
#在Flexbox里两端对齐
另一个控制对齐的属性是justify-content，当你想让多个元素等分空间时非常有用。
可接受的值有：center，flex-start，flex-end， space-between（元素利用主轴之间的空间而排布）和space-around（元素利用主轴之前、之间和之后的空间而排布）。
例如，在之前你一直使用的简单HTML模板里，你可以在里找到三个元素：
.main {
display: flex;
justify-content: space-between;
}
也试一下设置为space-around，观察不同的结果。
Flexbox中弹性子项的大小
使用flex属性，你能够对照flex容器中其他元素来控制弹性子项的大小。
这个属性是以下独立属性的简写：
flex-grow：一个数字，指明元素如何相对其他flex项来拉伸
flex-shrink：一个数字，指明元素如何相对其他flex项来收缩
flex-basis：元素的长度。可接受的值有：auto，inherit或者一个数字后面紧跟着%，px，em或其他长度单位。
例如，想得到三个等宽的列，只需给每一列设置flex:1，其他什么都不用做：
nav, aside, .content {
flex: 1;
}
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路
如果你需要.content占据
那仅仅是对flex属性最简单的应用。同样可以设置flex-grow，flex-shrink和flex-basis这些值，不过那超出本文的话题范围了。
总结
如你所见，如果我们想控制元素在网页中的布局，flexbox可以让我们的生活更加轻松。它非常稳固和可靠，让以前那些我们每天使用的诸如使 让容器坍缩之类的奇技淫巧，成为了过去。
像我们说的，如今，在针对整个页面进行布局时，CSS网格是更好的方案，但我们仍然值得去了解flexbox能做的那些事情。flexbox的最佳应用场景，体现在对元素的一维排列上，但如果有需要，它也能在稍老旧的浏览器中，为CSS网格布局提供方便的替代方案。
扫一扫
602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
