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

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 失效了怎么办?的详细内容,更多请关注其它相关文章!