flex布局实现常见布局汇总

Flex布局是一种灵活的盒模型，所有现代的PC端和移动端浏览器都支持它，因此它不会有太多兼容性问题。为了使用Flex布局，我们需要将容器元素设置为display:flex并将其变成Flex容器，子元素就变成Flex子元素。在Flex布局中有两个轴：主轴和交叉轴，它们互相垂直，而主轴默认是水平方向。Flex子元素默认会沿主轴排列，可以控制子元素在主轴上的伸缩。本文将讲解一些典型场景中实现Flex布局的方法以及相关的CSS属性。要使用Flex-grow属性，可以控制Flex子元素在容器还有空间剩余时如何进行扩展。默认值是0，也就是不扩展，子元素会显示它们默认大小。相关属性分为两类：一类是给Flex容器设置的，一类是给Flex子元素设置的。本文将讲解使用Flex布局实现一些典型场景和相关属性的使用方法。最后提醒一下，更详细的内容可以参考MDN网站上的相关文档。