flex

--- highlight: a11y-dark theme: channing-cyan --- # 前言你真的会用`flex`吗？ flex除了用作垂直居中还能干什么？本文适合用flex布局用作垂直居中，不了解flex其他用途的读者 # 自动撑满高度首先我们先创建一个容器，里面包含box1，box2两个item项 ```html flex

``` css部分 ```css .flex-container{ width:100vw; height:100vh; display:flex; flex-direction: column; } .flex-container .box1{ width:100%; height:300px; background: red; } .flex-container .box2{ width:100%; flex-grow: 1; flex-shrink: 1; background: green; } ``` 只需把主轴方向设置成column，并且子项flex-grow和flex-shrink属性为1即可 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37942a0fbcb3450a99f8394c0b32d378~tplv-k3u1fbpfcp-watermark.image?) 多层flex自动撑高不生效问题先改造一下原本的DOM结构 ```html

this is a p

this is text
this is text
this is text
this is text
this is text
this is text
this is text
this is text
this is text
this is text
this is text
this is text
this is text
this is text
this is text
this is text
this is text
this is text
this is text
this is text
this is text
this is text
this is text
this is text
this is text

``` 我们的目标是把box2_wrap自动撑高并且实现溢出滚动效果，预期效果 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f985c49829e3457d9e4bff8defc1a9b6~tplv-k3u1fbpfcp-watermark.image?) css实现效果代码如下 ```css .flex-container .box2{ width:100%; flex:1; background: green; display:flex; flex-direction: column; } .flex-container .box2 p{ height:200px; display:flex; justify-content:center; align-items:center; } .flex-container .box2_wrap{ background:#fff; flex: 1; display:flex; flex-direction: column; overflow:auto; } ``` `提示：flex:1是flex-grow: 1和flex-shrink: 1的缩写` 实际得到的效果如下 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6f764325ff214021a021a412f6d22276~tplv-k3u1fbpfcp-watermark.image?) `如何解决？` 只需给box2设置高度为0即可 ```css .flex-container .box2{ width:100%; flex:1; background: green; display:flex; flex-direction: column; height:0 //给box2设置高度为0 } ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3ebfa58ffac648429c236a6e987f9e2c~tplv-k3u1fbpfcp-watermark.image?) # 替代line-height 我们知道line-height可以用来设置行高已知有一高度为250px的ul，里面有5个li 通过设置li的高度为50px就可以等分ul的高度 `如果在不知道ul高度并且不知道li数量的情况下，如何等分ul的高度？` ```html

this is text
this is text
this is text
this is text
this is text

``` ```css .flex-container{ width:100vw; height:100vh; } .flex-container ul{ height:100%; } .flex-container ul li{ background:yellow; border:2px solid #fff; } ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/54895bfef7784159b6316806508967e1~tplv-k3u1fbpfcp-watermark.image?) 我们可以通过flex的`flex-grow`属性自动分配剩余空间放大item项来实现 ```css .flex-container ul{ height:100%; display:flex; flex-direction:column; } .flex-container ul li{ background:yellow; border:2px solid #fff; flex-grow: 1; display:flex; justify-content:center; align-items:center; } ``` 得到效果如下 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d8ba0985dc114007b7e0c33f1c0a39b8~tplv-k3u1fbpfcp-watermark.image?) # 排序通常，我们从后台拿到的数据是乱序的，我们可以通过flex的`order`属性给项目排序展示以下是一个排行榜例子 ```html

排行榜

第一名
第二名
第三名

``` ```css .flex-container{ width:100vw; height:100vh; padding-top:300px; } .flex-container h5{ text-align:center; font-size:20px; margin-bottom:20px; } .flex-container ul{ height:100%; display:flex; justify-content:center; } .flex-container ul li{ width:100px; height:100px; line-height:100px; text-align:center; border-radius: 100%; background:yellow; margin:20px; } .flex-container ul li:nth-child(1){ order:1; position:relative; top:-20px; } .flex-container ul li:nth-child(2){ order:0; } .flex-container ul li:nth-child(3){ order:2; } ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1c12cdcca3b941e592f933f6ffb707fd~tplv-k3u1fbpfcp-watermark.image?) # 总结以上就是几个比较实用的flex小技巧觉得不错的小伙伴记得点个赞哈！❤️❤️❤️