欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

當父項高度較大時，彈性項目在橫軸上留出額外空間[重復]

CSS
吉茹定2年前7瀏覽0評論

flex容器的高度是550像素，我總共有10個flex項目。每個伸縮項目的高度和寬度為70px。

下面是完整的html代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }

        body {
            width: 40vw;
            margin: 1rem auto;
        }

        .container {
            width: 100%;
            border: 2px solid red;
            padding: 1rem;
        }

        .item {
            border: 2px solid green;
            padding: 1rem;
            margin-right: 1rem;
            margin-bottom: 1rem;
            width: 70px;
            height: 70px;
        }
    </style>
</head>

<body>
    <div id="helloFlex">
        <div class="container" style="display: flex;flex-wrap: wrap;height: 550px;"> <div class="item">
            <span>1</span>
        </div>
        <div class="item">
            <span>2</span>
        </div>
        <div class="item">
            <span>3</span>
        </div>
        <div class="item">
            <span>4</span>
        </div>
        <div class="item"><span>5</span></div>
        <div class="item"><span>6</span></div>
        <div class="item"><span>7</span></div>
        <div class="item"><span>8</span></div>
        <div class="item"><span>9</span></div>
        <div class="item"><span>10</span></div>
         </div>
    </div>


</body>

</html>

這是它的樣子Flex container is in red border and flex items are in green border

彈性容器在紅色邊框中，彈性項目在綠色邊框中。

我的問題是為什么flex item 5后面有這么多多余的空間？？

如果我從容器div中刪除高度:550px，那么它看起來正常。像這樣

enter image description here

# # #您需要指定希望元素如何自我對齊，可以通過使用flexbox容器上的align-content屬性來實現

#helloFlex div {
  align-content: flex-start;
}