CSS中具有相对高度和不同大小的Flex网格答案

【问题标题】：Flex grid with relative height and different sizes in CSSCSS中具有相对高度和不同大小的Flex网格
【发布时间】：2017-07-13 00:02:44
【问题描述】：

我想要达到的目标

我正在处理这样的网格：

这对于固定的宽度和高度是没有问题的。但我不能让它与相对宽度和高度一起工作。每个盒子都必须是正方形。它们的宽度为 100%。高度应该相同，所以不是硬编码。每个盒子都会在中心/中间显示一个图像。

无论我尝试什么（引导网格、flex、硬编码填充等），我都无法完成。

感谢您的帮助！

【问题讨论】：

请附上您的代码，谢谢
我不明白你......你不想保持固定的高度，但你想让内容确定他们父母的身高？不是那些对立面。除非所有图像都具有相同的高度，你如何期望一个灵活的容器在没有固定高度的情况下被固定。
好吧，我不明白这个问题。理论上我可以用js得到div的宽度，用js设置高度等于。但我想会有更好的解决方案。我将添加一个代码结构来阐明我的意图。
@kingardox 为什么不使用CSS grid layout？它有很好的浏览器支持。另外为什么不使用表格？我的意思是你可以通过display: table-row/display: table-cell 实现这一点。 Flexbox 是关于 1D 布局的，如果没有额外的 Javascript，它不会完全解决这个问题。
@kingardox 如果您对表格和/或网格没问题，我可以给您发布示例。

标签： html twitter-bootstrap css flexbox

【解决方案1】：

检查以下内容。我想这就是你需要的。

* {
  box-sizing: border-box;
}

.container {
  display: flex;
}

.big-image {
  padding: 50px;
  background-color: black;
  margin-right: 1em;
}

.small-image {
  padding: 50px;
  background-color: black;
  margin-right: 1em;
}

.small-images .small-image:nth-child(1) {
  margin-bottom: 1em;
}

<div class="container">
  <div class="big-image"><img src="http://placehold.it/300"></div>
  <div class="small-images">
    <div class="small-image"><img src="http://placehold.it/100"></div>
    <div class="small-image"><img src="http://placehold.it/100"></div>
  </div>
  <div class="small-images">
    <div class="small-image"><img src="http://placehold.it/100"></div>
    <div class="small-image"><img src="http://placehold.it/100"></div>
  </div>
</div>

【讨论】：

这是正确的想法，但这只是因为图像尺寸完全适合。就我而言，盒子的内容正在改变。因此，无论盒子的内容如何，我都不希望盒子的大小始终相同。
既然你提到了硬编码填充，我认为这是允许的。代码已调整。

【解决方案2】：

尝试使用 jQuery 将 div 的高度设置为等于它们的宽度。

    <script>
    $(document).ready(function () {
        giveHeight();
        $(window).resize(function () { giveHeight() });
    });
    function giveHeight() {
        $(".col-xs-6").each(function () {
            $(this).height($(this).css("width"));
        });
    }
</script>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6 red">BIG</div>
        <div class="col-xs-6">
            <div class="row ">
                <div class="col-xs-6 red">1</div>
                <div class="col-xs-6 red">2</div>
                <div class="col-xs-6 red">3</div>
                <div class="col-xs-6 red">4</div>
            </div>
        </div>
    </div>
</div>

【讨论】：