Flexbox 等高立柱

Question

当前看起来像这样

 .col-container { display: flex; justify-content: start; align-items: center; flex-wrap: wrap; }.col { padding: 4rem; margin: 1rem 1rem 0rem 1rem; flex-basis: 25rem; flex-grow: 1; background-color: #191d2b; }

 <div class="col-container"> <div class="col" style="background:orange"> <h2>Column 1</h2> <p>Hello World</p> </div> <div class="col" style="background:yellow"> <h2>Column 2</h2> <p>Hello World:</p> <p>Hello World.</p> <p>Hello World.</p> <p>Hello World.</p> </div> <div class="col" style="background.orange"> <h2>Column 3</h2> <p>Some other text..</p> <p>Some other text..</p> </div> </div>

周一快乐，

我有一个问题，如何制作等高的列？ 当我有很多内容时，它会破坏设计。 有人可以向我建议如何创建一个等高的列吗？ 基本上基于所有其他列的内容动态调整它们的高度，但我想让宽度保持不变，在移动设备上，宽度变为 100%。 要添加更多信息，我正在尝试使用 flexbox 使用相同的高宽列创建响应式网格。

Answer 1

您可以将align-items: stretch添加到.col-container 。 这将拉伸所有列以填充父级的高度。

这是一个很好的参考 flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

为此使用 CSS 网格：

 .col-container { display: grid; grid-auto-rows:1fr; /* this will make sure the height is the same even after wrapping*/ grid-template-columns:repeat(auto-fit,minmax(25rem,1fr)); }.col { padding: 4rem; margin: 1rem 1rem 0rem 1rem; background-color: #191d2b; }

 <div class="col-container"> <div class="col" style="background:orange"> <h2>Column 1</h2> <p>Hello World</p> </div> <div class="col" style="background:yellow"> <h2>Column 2</h2> <p>Hello World:</p> <p>Hello World.</p> <p>Hello World.</p> <p>Hello World.</p> </div> <div class="col" style="background.orange"> <h2>Column 3</h2> <p>Some other text..</p> <p>Some other text..</p> </div> </div>