javascript - 使用 (flexlayout) 列时，div 大小不正确

Question

我有 4 个 li 的，其中一个 div 有一个背景图像(通过 CSS)。我正在使用 flexbox 进行布局。我希望它在每列中包含 3 个 li's 列。除了包含图像的 div 之外，一切正常。 div 的高度大于其父元素。

奇怪的是，当我把它变成行而不是列时，它有正确的高度。

(如果您显示的尺寸正确，请尝试将窗口宽度调宽。)

如何使 div 具有正确的大小？

JSFiddle

$(document).ready(function () {
    "use strict";

    function resizeHeightLi() {
        $('li').css('height', 'calc(' + $('li').width() + 'px / 1.8)');
    }

    resizeHeightLi();

    $(window).resize(function () {
        resizeHeightLi();
    });

});

html, body {
    margin: 0;
    height: 100%;
}
div {
    align-items: center;
    justify-content: center;
    height: 100%;
    display: flex;
    overflow: auto;
    background-color:aqua;
}
ul {
    margin-top: auto;
    margin-bottom: auto;
    flex-basis: 70%;
    height: 80%;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    /*flex-direction: row; // When it's set to row, it works fine.*/
    flex-direction: column;
}
li {
    
    flex-basis: calc(100% / 3 - 2px); /* Subtract the border */
    color: firebrick;
    list-style-type: none;
    
    border: 1px solid firebrick;
}
.image {
    background-image: url("http://i.imgur.com/nswXRR4.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <ul>
        <li><div class="image"><span>1</span></li>
        <li><div class="image"><span>2</span></li>
        <li><div class="image"><span>3</span></li>
        <li><div class="image"><span>4</span></li>
    </ul>
</div>

Answer 1

由于每个 li 的高度都由 CSS 中的 flex-basis 规则处理，我认为没有必要用 JavaScript 再次分配高度.相反，您可以在完成 flex 计算后获取每个 li 的高度，并将其分配给您的图像 div。这样，父元素和子元素的高度都相同。

function resizeHeightLi() {
    $('.image').css('height', $('li').height() + 'px');
}

编辑(仅限 CSS)

要完全使用 CSS 完成相同的操作，您可以删除所有现有的 JS，并将以下内容添加到您的 CSS:

// In addition to what you already have in your li
li {
  // ...
  position: relative;
}

// Same here, in addition to what you have in .image
.image {
   // ...
   position: absolute;
   width: 100%;
   height: 100%;
}