浅谈flex布局中小技巧

Posted 2020-11-05 jiasonglindeboke

  最近有个面试，面试官问到，在一个横向布局上，假设有三个div，每个宽度为定宽apx，如果想使两侧宽度为x,中间div间间隔为2x。x可以自适应。如下图：

  怎么做很简单，两行代码就搞定：

  justify-content 常用属性有：flex-start | flex-end | center | space-between | space-around

  前三个就是字面意思，向行起始位置对齐，向行结束位置对齐，向行中间位置对齐。

后两个中，space-between ：元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于‘flex-start‘。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。大白话就是会把第一个元素的位置与行起始位置对其，最后一个元素与行结束位置对其，中间的剩余空间平均分布。如下图：

 

  space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于‘center‘。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。如一图。

  说到这其实都是废话，这些都是flex布局初始学习就会接触到的。主要是这个面试官又问，如果中间不是2x，是x呢，也就是每个间隙与两侧的间隔相同。也就是这样：

这个问题我一开始想的是两侧设置padding，中间用justify-content: space-between;可是这样在不同的屏幕上看到的两侧padding值肯定是不同的，所以中间的间隙与两侧就不想等了。。。所以最后我也没想出来。回来之后发现justify-content居然还有space-evenly这么个属性！这个属性干嘛用的不言而喻。均匀排列每个元素，每个元素之间的间隔相等。上题就解决了。但是space-evenly的兼容性比起常用的justify-content值来说还是要差不少。

  我们不能只满足与解决一道面试题，再实际情况下可能会有很多奇葩的情况，比如说上图4个x改成3个x，一个2x（虽然我是从来没见过这种奇葩的设计。。）那又该怎么办呢？

  这里我想到了css3的cacl()，这玩意儿百分比，px值混搭都能计算，强的一批。比如实现上面的要求：

也一样可以达到效果。（假设a的值为100px）而且不管是什么情况都可以计算出你想要的大小，简直不要太爽。

可是，cacl()虽然兼容性比起space-evenly要好一点。如下图：

我们还是看到android Browser还是只有部分支持。所以cacl()在移动端还是要慎用。

最后还请大佬有什么即可以达到目的又有很好兼容性的办法还望不吝赐教。嘿嘿。