在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/UI  網(wǎng)絡(luò)安全/ flex布局+overflow后, 右側(cè)邊距消失了

flex布局+overflow后, 右側(cè)邊距消失了

css: 
    .flex{
        width: 500px; height: 50px;
        border: 1px solid pink;
        overflow: auto;
        display: flex; align-items: center;
    }
    .flex-child{
        min-width: 25%;
        border: 1px solid violet;
        margin: 0 5px;
        flex: 0 1 25%; display: flex; align-items: center; justify-content: center;
    }
html: 
    <div class="flex">
        <div class="flex-child">1</div>
        <div class="flex-child">2</div>
        <div class="flex-child">3</div>
        <div class="flex-child">4</div>
        <div class="flex-child">5</div>
    </div>

clipboard.png
clipboard.png

回答
編輯回答
她愚我

跟 flex 沒(méi)關(guān)系，是子元素大小超出父元素引起的。

<div class='wrapper'>
    <div class="inner">
    </div>
</div>
.wrapper {
    width: 100px;
    overflow: auto;
}
.inner {
    width: 120px;
}

也會(huì)出現(xiàn)這種情況，包括父容器的padding-right，也不是無(wú)效，還是有的，但是沒(méi)起到影響布局的效果。
應(yīng)該是，超出情況下在兩側(cè)布局樣式無(wú)法同時(shí)滿(mǎn)足時(shí)，默認(rèn)左上為布局起點(diǎn)，所以?xún)?yōu)先滿(mǎn)足margin-left等左側(cè)布局樣式。

2018年4月14日 20:07