Question

我使用flex来使三列的高度与内容最匹配的列匹配。

但是，该页面现在没有响应。

当我减小浏览器的大小以模拟移动设备时，元素不会垂直堆叠，只会缩小宽度。

任何人都有解决方案吗？

以下是一个例子：

＆＃13;

    .w3-row {
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: stretch;
      align-items: stretch;
    }

＆＃13;

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

<body>
  <div class="w3-row">
    <div class="w3-third w3-indigo w3-card-2 w3-margin w3-padding">
      <h2>Column 1</h2>
      <p>Text</p>
      <p>More text</p>
    </div>
    <div class="w3-third w3-card-2 w3-margin w3-padding">
      <h2>Column 2</h2>
      <p>Text</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    </div>
    <div class="w3-third w3-red w3-card-2 w3-margin w3-padding">
      <h2>Column 3</h2>
      <p>Text</p>
      <p>More text</p>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

您所缺少的是容器上的flex-wrap: wrap。

默认值为flex-wrap: nowrap，强制弹性项目保留在一行中。就像在你的例子中一样，flex项目只会缩小它们的宽度，但不能包裹。

试试这个：

.w3-row {
    display: flex;
    align-items: stretch;   /* initial setting; can be omitted */
    flex-wrap: wrap;        /* allow container to have multiple lines */
}

DEMO

参考：

5.2. Flex Line Wrapping: the flex-wrap property

元素不是在较小的屏幕上垂直堆叠，它们的宽度只是缩小

1 个答案: