Question

是否可以使每行内的列彼此之间具有相同的高度？例如，使两个蓝色标题的大小相同，依此类推

很抱歉，以前是否有人问过这个问题，但是我在搜索时看不到答案。

 <div class="row">
    <div class="column">
        <h2>heading</h2>
        <div class="block-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, nesciunt.</div>
        <div class="block-2">Lorem ipsum dolor sit amet.</div>
      </div>

      <div class="column">
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, maiores!</h2>
        <div class="block-1">Lorem ipsum</div>
        <div class="block-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quam praesentium suscipit laudantium illo voluptatibus eligendi, est exercitationem commodi reiciendis.</div>
      </div>
    </div>

 .row {
  display: flex;
}

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

  * {
    flex: 1;
  }
}

https://jsfiddle.net/vdLaq7t1/

Answer 1

您可以使用align-items: stretch（这是align-items的默认值）来执行此操作，但是您应该重新设计HTML结构。

.column {
  background: silver;
}

h2 {
  background: cornflowerblue;
  margin: 0;
}

.block-1 {
  background: tomato;
}

.block-2 {
  background: brown;
}

.row {
  display: flex;
  
  /* Not required because it's already the default value */
  align-items: stretch;
}

.row > *{
  flex: 1;
}

<div class="row">
    <h2>heading</h2>
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, maiores!</h2>
</div>
<div class="row">
    <div class="block-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, nesciunt.</div>
    <div class="block-1">Lorem ipsum</div>
</div>
<div class="row">
    <div class="block-2">Lorem ipsum dolor sit amet.</div>
    <div class="block-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quam praesentium suscipit laudantium illo voluptatibus eligendi, est exercitationem commodi reiciendis.</div>
</div>

Flexbox在X和Y轴上均可工作。使用flex-direction: column时，您要将主轴从X更改为Y。您可以使用justify-content属性管理主轴，并使用align-items属性管理辅助轴。

问题是align-items可以使用stretch值，但是justify-content不能。

因此，如果您希望高度相同（Y轴），则需要使用align-items: stretch对其进行拉伸，但是align-items仅适用于辅助轴，因此主轴必须为在这种情况下为X轴，这意味着您不能使用flex-direction: column来使它们具有相同的高度。

Answer 2

可以使用许多技术来完成。例如，您可以将1个行中放置6个columns。

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex-basis: 70%;
}

.column.sm {
  flex-basis: 30%;
}

.blue {
  background: blue;
}

.silver {
  background: silver;
}

.cornflowerblue {
  background: cornflowerblue;
}

<div class="row">
  <div class="column blue sm">heading</div>
  <div class="column blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, maiores!</div>
  <div class="column silver sm"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore quaerat, facilis qui placeat! Voluptatem reprehenderit similique rerum officia iste error ab, animi nobis quaerat culpa possimus, nisi laboriosam aliquid hic.</div>
  <div>Tempora eius eaque harum, temporibus sequi porro, minima quia, necessitatibus amet nisi unde reiciendis iure ipsa, facilis rerum qui dolores doloribus sed voluptatum! Dicta at, qui, exercitationem molestiae voluptas natus.</div></div>
  <div class="column silver">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto nemo ipsum voluptates mollitia eius enim, esse voluptatibus eaque doloremque vel asperiores quos unde similique rerum perspiciatis iure, ipsam eum soluta.</div>
  <div class="column cornflowerblue sm">lorem</div>
  <div class="column cornflowerblue"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore enim recusandae veniam optio delectus doloremque maiores quidem, impedit vel reprehenderit quam vitae, fugit atque assumenda molestiae debitis laboriosam blanditiis fugiat.</div>
  <div>Excepturi ea minima accusantium delectus totam quae fugiat, ex eos inventore deleniti odit, commodi eveniet, eum ullam consectetur ipsa quasi odio similique. Doloribus tempore accusantium soluta, id deserunt maxime accusamus.</div></div>
</div>

Flexbox-行内相同高度的列

2 个答案: