弹性布局小技巧

弹性布局小技巧

大对数人刚学完弹性布局时候会很疑惑，写出来的东西总是不尽人意，总有那种我明明是这样想的，为什么出来是另一种效果

弹性布局对图片的处理

有时候我们会直接用弹性布局去做图片，比如三张图片往里一放，父级直接加弹性布局display:flex;justify-content:space-around;
结果出来的图片重叠在了一起，感觉图片太大了，又去调图片大小50%，调了之后，完了，图片变形了，拉伸了，其实出现这样的问题主要是因为弹性布局自适应了图片高度，图片高度没发生改变，而宽度发生了变化，所以它变形了，那怎么办？给高度也设置了，那设置多少？不用考虑，直接上100%；因为这个时候的100%不是图片本身的100%了，而是图片宽度变为50%之后和原本图片大小的比例，这个比例用在高度上，高度只要显示100%就行，但是你不设置100%，这个比例就不会应用在高度上。

总结

当你给图片做弹性布局改变了图片宽度，那给图片高度设置一个100%，图片就不会变形。

弹性布局对文字图片最好的处理方式（个人认为）

我觉得最好的方式就是不要让本身非块级标签直接进行弹性布局，可以选择用一个div进行包裹，因为非块级元素弹性布局之后总会出现一些不尽人意的效果。

justify-content:space-between;多块处理

这种布局多见于电商类

分为三大块服务一块 服务详情一块，支付方式一块
我喜欢的布局方式就是弹性布局的——一父两子
什么叫一父两子？父级做弹性布局，它下面只有两个儿子，而儿子又作为父亲它下面还有两个孩子，这样在使用的时候不会出现第三个无法控制的情况，每一个都可以精准控制！