css - 使子级的行换行内容

This question already has answers here:

How to disable equal height columns in Flexbox?

                                    （3个答案）


                                在8个月前关闭。


我应该在此CSS中进行哪些更改，以使flex行的任何子项包装其子项的内容，而不匹配其最高的高度？

 .flex-row{
        display: flex;
        flex-direction: row;
    }
    .flex-column{
        display: flex;
        flex-direction: column;
    }

  <div>

        <div class="flex-row">

            <div style="background-color: yellow">
                <div>Test</div>
                <div>Test</div>
                <div>Test</div>
                <div>Test</div>
                <div>Test</div>
            </div>
            <div style="background-color: cyan;">
              Test
            </div>
        </div>

    </div>

最佳答案

您必须在align-items: flex-start上应用.flex-row属性，如下所示：

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start; // Add this
}

.flex-column {
  display: flex;
  flex-direction: column;
}

<div>
  <div class="flex-row">
    <div style="background-color: yellow">
      <div>Test</div>
      <div>Test</div>
      <div>Test</div>
      <div>Test</div>
      <div>Test</div>
    </div>
    <div style="background-color: cyan;">
      <div>Test</div>
      <div>Test</div>
    </div>
  </div>
</div>

关于css - 使子级的行换行内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56101375/

上一篇：html - 如何使图像大小相同

下一篇：html - 在 css Grid 中向包装器添加填充会导致水平滚动

相关文章：

jQuery:按需加载 css + 完成后回调

CSS隐藏div在flexbox的末尾

css - 使用 dialogflow 的 ionic 3 聊天 UI

css - 在网页上加载自定义 html 和 css？

html - 如何使所有元素的宽度相同但尽可能小？

css - 如何以不同的分辨率指定 Material 2 底板的宽度

html - 为什么我的输入宽度增长如此之多？

html - 当我在手机或 Safari 上查看我的网页时，为什么我的 CSS 网格和 flexbox 图像显示空白区域？

javascript - 图像将整个 body 向右移动

javascript - css 图像翻转(连续 4 张图片)