flex 布局中 padding-right 失效了怎么办？

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《flex 布局中 padding-right 失效了怎么办？》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

flex布局中，padding-right失效的解决方案

在flex布局中，你遇到padding-right没有效果的问题，可能是以下代码造成的：

width: 100vw;

当你的父元素宽度设置成100vw时，padding-right就会失效，因为整个父元素的宽度已经撑满视口。

要解决这个问题，你可以将父元素的宽度改为100%，如下所示：

width: 100%;

这样，padding-right将起作用，并且内部元素将具有水平空间。

在某些情况下，你可能需要考虑width:100vw !== width: 100%这种差别。因此，推荐你使用以下代码：

width: calc(100vw - 10px);

这将实现你目前所需的效果。

终于介绍完啦！小伙伴们，这篇关于《flex 布局中 padding-right 失效了怎么办？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！