移动端响应式布局利器：Flexbox
移动设备的流行已经不可逆转，我们需要考虑如何让我们的网站在移动设备上更加友好。而响应式布局则是这种友好的方式之一，不同于传统的绝对定位，响应式布局使用相对定位来实现。
这里我们介绍一种强大的移动端响应式布局利器——Flexbox。
什么是 Flexbox
Flexbox，又称为弹性盒模型，它可以让我们更方便的实现各种布局，让页面更加灵活和适应性强。 它可以让容器中的所有子项（包括嵌套子项）等分和对齐元素到容器中。
常用属性
Flexbox 可以使用以下属性：
display 设置容器为块级元素或者行内元素。
flex-direction 设置主轴的方向，主轴是 Flexbox 中最重要的概念，决定了子项的排列方式。
可选值为： - row （水平方向，起点在左端） - row-reverse（水平方向，起点在右端） - column（垂直方向，起点在上方） - column-reverse（垂直方向，起点在下方）
- flex-wrap 当 Flexbox 中所有项不能放在一行中的时候，是否换行。
可选值为： - nowrap（不换行） - wrap（换行） - wrap-reverse（反向换行）
- justify-content 设置主轴上子项的对齐方式。
可选值为： - flex-start （起点对齐） - flex-end（终点对齐） - center（居中对齐） - space-between（两端对齐） - space-around（环绕对齐）
- align-items 设置交叉轴上子项的对齐方式。
可选值为： - stretch （默认值，子项拉伸以与容器一样高） - flex-start （顶部对齐） - flex-end （底部对齐） - center （居中对齐） - baseline （基线对齐）
- align-content 设置多行子项在交叉轴上的对齐方式。
可选值为： - stretch （默认值，所有多行子项拉伸以与容器一样高） - flex-start（第一行顶部对齐） - flex-end（最后一行底部对齐） - center（所有子项居中对齐） - space-between（两端对齐） - space-around（环绕对齐）
- flex 指定项目所占空间比例。
示例代码
下面是一个简单的 Flexbox 布局的示例代码：
HTML 代码
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
CSS 代码
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- -------------- - ----- - ------ ---- ------- ------ -
这样就会在容器中创建等宽的三个项，并在这些项之间分别增加了一些空白，以便创建一个响应式布局。
总结
Flexbox 是在移动设备上实现布局的强大工具之一。它可以帮助我们更容易地实现复杂的布局，并可以让我们节省大量时间和精力。现在，我们已经了解了一些基本的 Flexbox 属性，实际的开发中还有很多其他的选项，尝试并掌握这些技能可以让我们更好的为移动设备设计更加友好的网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648192f048841e989410c869