浅谈flex布局中小技巧

  最近有个面试，面试官问到，在一个横向布局上，假设有三个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()在移动端仍是要慎用。

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