本文是关于CSS Flex布局的入门介绍，重点讲解了如何设置display: flex创建上下文，以及元素在主轴方向上的排列、收缩和扩展。通过示例代码展示了flex-shrink和flex-grow属性如何控制元素在空间不足或空余时的行为，并介绍了flex属性的用法，帮助读者理解Flex布局的基本原理。
本系列文章将会对CSS的flex布局做一个简单的介绍，希望读者朋友们能够对它的功能有一个整体的认知，在工作中可以自由的运用。
这是本系列文章的第一篇，主要介绍flex布局中元素的收缩和扩展。
如果要使用flex布局，那么第一个使用到的CSS属性一定是display: flex，使用它可以声明出一个上下文。在这里，它有一套独有的元素渲染规则。
现在，我们在这个上下文里加入一些元素。和上下文外面的规则不同，上下文内的元素会按照主轴方向(本篇文章中，主轴方向为从左到右)依次排列，即使这是一个块级元素，例如div。
代码示例：
内容1
内容2内容2
内容3内容3内容3
显示效果：
最低0.47元/天 解锁文章
扫一扫
3624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
