一文说白 CSS 弹性布局 Flexible Box

哎呀，最近又入坑了，因工作需要，最近不得不做一款小程序，我一个后台开发工程师，跑来小程序打酱油，我也是很无奈。其实写 JS 代码还 OKey，但是涉及到界面，让我自己布局，简直叫我抓狂呀。不过还好，相对安卓来说，还不算特别难。

阅读原文效果

在传统中，一讲到布局，我们就会想到「盒子模型」，也就会经常用到 display 属性、position 属性、float 属性。

我这里做了个脑图，可以快速入门，哈哈

但是这个模型对于那些特殊布局非常不方便，比如，垂直居中就不容易实现！

在接下来说到的「弹性布局」中，这个问题就轻易解决。

下面一起来学习一下这个弹性布局 Flexible Box。它可以非常简便、完整、响应式地实现各种页面布局。

目前，它已经得到了所有浏览器的支持，所以我们不用担心适配！

学习一个新的事物，我们要先掌握一些基本的概念，如果某些概念暂时不理解，可以临时放一放，读到后面，图文结合，到了一定层次，我们应该自然而然地就会明白了。

就好像，就算你小学再怎么不认真上课，但到了初中，当时你不懂的小学的知识，你就可能已经明白了。就是这个理，但中途你不可放弃不断学习。

声明一下，文章主要参考了两篇国外的文章 「A Complete Guide to Flexbox」 和 「A Visual Guide to CSS3 Flexbox Properties」和廖雪峰老师的翻译，但是我觉得他翻译不是特别准确，所以会有些保留，同时也加入自己的一些理解。

整体思路是如下思维导图所示

图片看得不是非常清楚，而且由于电脑屏幕不够大，截的图也没能截全，我也很无奈。如果觉得不错，可以私下找我分享。

基本概念

采用 Flex 布局的元素，被称为 Flex Container，可称「Flex 容器」。它的所有子元素称为 Flex Item。

廖老师文中说是 Flex 项目，我觉不恰当，我称它们为「子项」，不过最好还是成为「item」。

这里需要注意的是，经我测试，如果子项中，再放入其他元素&