之上。注意这里是如何在页面中嵌套使用flex容器来达到你想要的效果的。
因为，和
.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;
}如果你需要.content占据
那仅仅是对flex属性最简单的应用。同样可以设置flex-grow，flex-shrink和flex-basis这些值。
到此，相信大家对“怎么掌握CSS工具Flexbox”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
分享标题：怎么掌握CSS工具Flexbox-创新互联
当前路径：
http://cdxtjz.cn/article/hopsg.html
