如何用CSS3 Flex实现全场景响应式布局？

本文共计927个文字，预计阅读时间需要4分钟。

背景：网络上有许多讲解flex布局的教程，解释了各种属性的效应。

简介：如果您对flex布局不熟悉，可以先自行了解。本文主要讲述如何使用优秀的封装库，方便地在各地使用，实现一劳永逸的效果。

背景：网上有很多讲解flex布局的，解释各种属性的效果。如果不熟悉的可以先自行了解一下，本文主要是讲如何使用封装好的样式库，已方便在各地地方引用，实现一劳永逸。不到30行的样式库在最后，可直接放在单独文件全局引用。

1、实现水平从左到右布局：flex-row-start-start

下面的html结构都和这一样，固只截取效果。

2、水平中间布局：flex-row-center-start

3、水平从右到左布局：flex-row-end-start

4、水平布局垂直铺满：flex-row-start-stretch

5、上面都是容器父元素，配合子元素的使用。