欢迎关注路条编程网站，通过学习 CSS Flexbox 弹性布局这一系列文章，你将会逐步掌握 Flex 布局相关的基础知识。Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。Flexbox 弹性布局的目标是提供一种更有效的方式来布置、对齐和在一个容器中为项目分配空间，即使它们的大小是未知的或动态的，因此使用单词 “flex” 来表示这种布局方式。flex 布局的主要思想是使容器能够更改其项目的宽度、高度和顺序，适应各种显示设备和屏幕尺寸以最佳的方式填充可用空间。flex 容器会扩展或收缩项目空间以填充容器或防止溢出容器空间。最重要的是，与基于垂直块和基于水平的内联块常规布局相比，flexbox 布局与方向无关。flexbox 布局尽管在页面上表现效果很好，但是它们缺乏灵活性来支持大型或复杂的应用程序，尤其是在方向更改、调整大小、拉伸，缩小等方面。注意：Flexbox 布局最适合应用程序的组件和小规模布局，而 Grid 布局则用于较大规模的布局。后面的专题我们会详细介绍 Grid 布局。由于 Flexbox 是一个完整的模块，而不是单个属性，因此它涉及很多事情，包括一系列属性信息。它们中的一些应放置在父元素容器上，而其他一些则应放置在子元素上。如果常规布局是基于块和内联流方向，则弹性布局是基于“柔性流向”的。下图解释了 flex 布局背后的主要思想。
项目将沿着水平主轴（main axis）从主轴的开始位置（main-start）到结束位置（main-end）或交叉轴（cross axis）从交叉轴的开始位置（cross-start）到结束位置（cross-end）进行布局。项目默认按主轴排列，后继文章我们会详细介绍 flex 相关属性及使用方法。重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。
今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。
作者：路条编程（转载请获本公众号授权，并注明作者与出处）
