css自适应布局方法自适应css怎么写( 二 ) _宽度

误差大，这种间距稍不留神就会出现溢出换行维护成本高，其他小伙伴维护需要注意这个伪类控制我们换一种思路来考虑。其实这类场景PC端是很常见的，我们可以联动父元素来解决。
思路：
父元素宽度设置为100%加上一个间距的距离父元素距离左侧减少一个间距的距离优点：
间距可以抽出为变量，方便维护误差小最终方案父元素flex布局，距离左侧为指定宽度，子元素宽度应该为正常的三个相同宽度和间距元素。
子元素标签宽度 = ( 页面总宽度100% – 页面左右宽度30px * 2 – 标签左右边框2px * 3 – 边框左右间距6px * 3 ) / 3；
化简：
子元素标签宽度 = 100% / 3 – 30px * 2 / 3 – 2px * 3 / 3 – 6px * 3 / 3
= 100% / 3 – 28px
// scss
$width: 6px;
// 父元素
.parent {
display:flex;
flex-wrap:wrap;
margin-left: (30px – $width);
margin-right: 30px;
width: calc(100%$width);
}
// 大致的想法
.child {
flex: 1;
margin: 10px $width;
width: calc(100% / 3 – 30px * 2 / 3 – 2px * 3 / 3 – $width * 3 / 3)
// width: calc(100% / 3 – 28px);
}
总结看似一个很容易很常见标签宽度自适应的布局样式问题，却引发了坑，各种思考，当然方案远不止这一种。我们可以通过实践经验总结出以下几点：
宽度自适应问题可以通过动态计算（当前主流浏览器基本都支持）子节点的宽度问题可以去思考父元素是不是能够做一些改变实现多思考，大胆实践，方法总比困难多，这样你才会摸索出更多的方法。web前端开发岗位，一定要能够脑洞灵活，各种角度各种方法思考。我们才能游刃有余。谢谢大家。

【css自适应布局方法自适应css怎么写】我是路程lucky ， 6年web前端开发经验，目前参与的项目技术栈主要是React ，欢迎关注~

css自适应布局方法 自适应css怎么写( 二 )

猜你喜欢

css自适应布局方法自适应css怎么写( 二 )