鍍金池/ 問答/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 沒關(guān)系，是子元素大小超出父元素引起的。

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

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

2018年4月14日 20:07