基于Flex的对齐垂直布局
时间：2023-03-31 12:29:37
CSS
一般来说，我们的布局都是水平布局，顶多能做到垂直居中。而对于一些float,position似乎并不适合垂直布局。就在前段时间用weex做了一个页面，weex是基于flex诞生的。而weex中flex-direction的默认值是column，flex-direction定义了flex容器中flex成员项的排列方向。页面分为三部分（header，section，footer），还有一些优化点：类似两端对齐，但是section最好高一点，尽量一屏显示。如果还不够，则会出现滚动条。那么让我们看看有什么可能。基于Flex实现我是内容，我希望我在屏幕中间显示，不想让我按住其他内容，我想一屏显示这个页面
首先设置基本条件display:flex;flex-direction:column;，因为浏览器默认是水平对齐。然后我们给盒子设置min-height:500px来模拟??屏幕高度，一般可以使用min-height:100vh或者html,body{height:100%;}。地址：https://www.lilnong.top/static/html/flex-direction-column-sf.htmljustify-content:space-between;我们可以直接设置两端的对齐方式#app{justify-content:space-between;}justify-content:space-between;第一个没有前填充，最后一个没有后填充justify-content:space-around;每个block的前后padding大小一样，也就是说有doublepaddingjustify-content:space-evenly；每个空白区域大小一致，貌似可以实现，但是如果我们还想微调位置，就很难做到了（放大，然后设置min-height，允许收缩）。地址：https://www.lilnong.top/static/html/flex-direction-column-sf.1.htmlflex:10autoflex是什么意思？flex-grow、flex-shrink和flex-basis的缩写。那么我们可以考虑使用section来展开，然后内容就可以垂直居中了。注意这个方案和之前方案的背景颜色可以看出区别，但是同样不太好操作。测试地址：https://www.lilnong.top/static/html/flex-direction-column-sf.2.htmlflex:1+blankblock根据上面的方案，我们知道flex可以自动缩放，所以我们用他做空白区域不就可以了吗？地址：https://www.lilnong.top/static/html/flex-direction-column-sf.3.html如果为了让下面的空白区域变大，我们可以给flex-grow:3;biggerzoomAreaOtherschemessection预留安全区域（min-height），上下填充。头尾绝对。绝对定位，容易被覆盖。那里还有什么？微信公众号：前端立农欢迎大家关注我的公众号。有问题也可以加我的微信前端交流群。
