在不使用 jQuery 的情况下，如何使 flexbox 网格/框/卡片的内部元素具有相同的高度？答案

【问题标题】：How can I have equal heights for inner elements of flexbox grid/boxes/cards without using jQuery?在不使用 jQuery 的情况下，如何使 flexbox 网格/框/卡片的内部元素具有相同的高度？
【发布时间】：2017-02-24 00:53:05
【问题描述】：

我使用 flexbox 创建了一个网格/框/卡片布局，因此所有项目的高度都相同。布局每行有 4 个框。这个特定的网格中只有内容/文本，所以我试图使所有标题标签的所有内部元素也具有相同的高度，但我没有这样做。我进行了很多研究并尝试了这些示例中提供的所有不同选项，但它不起作用。问题是一个网格或框中的任何行都可以是任何高度，因为输入的内容是动态的，我无法控制它

这就是我要做的，现在如果第一个框的黄色行中的内容多于第二个框的内容，那么第 2、3、4 个框的黄色行应该调整为第一个框的大小盒子。网格第一行中的框确实会调整到相等的高度，但框内的行不会，因此其他框的蓝色和绿色行向上移动，在框的末端留下一个间隙

代码片段：

.flexi-container {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
}
.left {
  float: left;
}
.col-100 {
  width: 100%;
}
.pos-rel {
  position: relative;
}
.grid-text-item {
  width: 20%;
  margin-right: 1%;
  margin-bottom: 1%;
  background-color: #fff;
  border: 1px solid #ddd;
  flex-direction: column;
  flex: 1;
}

<div style="width:100%;margin:0 auto;position:relative;">
  <div class="grid-text-container flexi-container pos-rel col-100 left">
    <div class=" grid-text-item pos-rel left flexi-container">
      <!--            <div class="grid-text-content pos-rel flexi-item left">-->
      <!--            <a class="full-link" href=""></a>-->

      <h2 class="col-100">Name</h2>
      <h3 class="col-100">Address,Address,Address,Address,Address</h3>
      <h4 class="col-100">
                <span class="block-element">123456</span>
                <span class="block-element">email@email.com</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
    <div class=" grid-text-item pos-rel left flexi-container">
      <!--            <div class="grid-text-content pos-rel flexi-item left">-->
      <!--            <a class="full-link" href=""></a>-->

      <h2 class="col-100">Name</h2>
      <h3 class="col-100">Address,Address,Address,Address,Address</h3>
      <h4 class="col-100">
                <span class="block-element">123456</span>
                <span class="block-element">email@email.com</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
    <div class=" grid-text-item pos-rel left flexi-container">
      <!--            <div class="grid-text-content pos-rel flexi-item left">-->
      <!--            <a class="full-link" href=""></a>-->

      <h2 class="col-100">Name</h2>
      <h3 class="col-100">Address,Address,Address,Address,Address</h3>
      <h4 class="col-100">
                <span class="block-element">123456</span>
                <span class="block-element">email@email.com</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
    <div class=" grid-text-item pos-rel left flexi-container">
      <!--            <div class="grid-text-content pos-rel flexi-item left">-->
      <!--            <a class="full-link" href=""></a>-->

      <h2 class="col-100">Name Name Name Name Name</h2>
      <h3 class="col-100">AddressAddress,Address,Address,Address,Address,Address</h3>
      <h4 class="col-100">
                <span class="block-element">123456</span>
                <span class="block-element">email@email.com</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
    <div class=" grid-text-item pos-rel left flexi-container">
      <!--            <div class="grid-text-content pos-rel flexi-item left">-->
      <!--            <a class="full-link" href=""></a>-->

      <h2 class="col-100">Name</h2>
      <h3 class="col-100">Address,Address,Address,Address,Address</h3>
      <h4 class="col-100">
                <span class="block-element">123456</span>
                <span class="block-element">email@email.com</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
    <div class=" grid-text-item pos-rel left flexi-container">
      <!--            <div class="grid-text-content pos-rel flexi-item left">-->
      <!--            <a class="full-link" href=""></a>-->

      <h2 class="col-100">Name</h2>
      <h3 class="col-100">Address,Address,Address,Address,Address,Address,Address</h3>
      <h4 class="col-100">
                <span class="block-element">123456</span>
                <span class="block-element">email@email.com</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
    <div class=" grid-text-item pos-rel left flexi-container">
      <!--            <div class="grid-text-content pos-rel flexi-item left">-->
      <!--            <a class="full-link" href=""></a>-->

      <h2 class="col-100">Name</h2>
      <h3 class="col-100">Address,Address,Address,Address,Address</h3>
      <h4 class="col-100">
                <span class="block-element">123456</span>
                <span class="block-element">email@email.com</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
    <div class=" grid-text-item pos-rel left flexi-container">
      <!--            <div class="grid-text-content pos-rel flexi-item left">-->
      <!--            <a class="full-link" href=""></a>-->

      <h2 class="col-100">Name</h2>
      <h3 class="col-100">Address,Address,Address,Address,Address</h3>
      <h4 class="col-100">
                <span class="block-element">123456</span>
                <span class="block-element">email@email.com</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
    <div class=" grid-text-item pos-rel left flexi-container">
      <!--            <div class="grid-text-content pos-rel flexi-item left">-->
      <!--            <a class="full-link" href=""></a>-->

      <h2 class="col-100">Name</h2>
      <h3 class="col-100">Address,Address,Address,Address,Address</h3>
      <h4 class="col-100">
                <span class="block-element">123456</span>
                <span class="block-element">email@email.com</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
  </div>

</div>

我不是 flexbox 的高级用户，目前还处于初级阶段

非常感谢您的帮助。

【问题讨论】：

标签： jquery html css flexbox

【解决方案1】：

您需要在要填充可用空间的元素中定义flex: 1; 的属性，在本例中是您的<h3>。

将会发生的事情是flex-grow，一个使用简写flex 设置的属性，现在将具有1 的值，让这个特定元素增长以填充可用空间。这是因为其他元素默认的flex-grow 值是0。

查看this和this类似的问题和答案。

为了清楚起见，在这里重复我自己：

弹性：<positive-number>：

等效于 flex: <positive-number> 1 0. 制作 flex 项目灵活并将弹性基础设置为零，从而产生一个项目在 flex 中接收指定比例的可用空间容器。如果 flex 容器中的所有项目都使用这种模式，它们的尺寸将与指定的弹性系数成正比。

我稍微改变了结构，使其更具语义化。

代码片段：

/* #region General Styling */

body {
  margin: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
h2,
h3,
h4,
h6 {
  padding: 1em;
  margin: 0;
}
hgroup {
  margin: 1em;
  border: 1px solid black;
}
h2 {
  background-color: tomato;
}
h3 {
  background-color: gold;
}
h4 {
  background-color: dodgerblue;
}
h6 {
  background-color: mediumseagreen;
}
/* #endregion*/

.flex-container {
  display: flex;  /* Top Level Flex-Container*/
  flex-wrap: wrap;
}
.flex-container > li {
  display: flex;  /* This is both a Flex-item and a Flex-container */
  flex-basis: 33%;
}
.flex-container > li > hgroup {
  display: flex;  /* This is both a Flex-item and a Flex-container  */
  flex-direction: column;
  flex: 1;  /* Fill available space within its Flex-container */
}
h3 {
  flex: 1;  /* Can grow to fill the available space within its Flex-container, you can instead just declare flex-grow: 1; too. */
}

<main>
  <section>
    <ul class="flex-container">
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae tellus at purus bibendum euismod eu vehicula odio. Praesent fringilla et leo scelerisque consequat. Pellentesque ornare, ligula non bibendum dapibus, nunc ex pretium nulla, in venenatis sem justo sed velit. Maecenas massa tortor, imperdiet non lacinia in, dapibus eu est. Sed eu ornare est. Proin sapien tellus, dictum a ex quis, egestas euismod justo. Phasellus metus nisi, suscipit a auctor quis, blandit vel dolor.</h3>
          <h4>
          <span>123456</span>
          <span>email@email.com</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Address, Address, Address, Address, Address</h3>
          <h4>
          <span>123456</span>
          <span>email@email.com</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Address, Address, Address, Address, Address</h3>
          <h4>
          <span>123456</span>
          <span>email@email.com</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Address, Address</h3>
          <h4>
          <span>123456</span>
          <span>email@email.com</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Address, Address, Address, Address, Address</h3>
          <h4>
          <span>123456</span>
          <span>email@email.com</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Address, Address, Address, Address, Address</h3>
          <h4>
          <span>123456</span>
          <span>email@email.com</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
    </ul>
  </section>
</main>

jsFiddle

注意事项：

您应该使用 HTML5 语义元素，这样您的标记才能真正向浏览器和我们开发人员描述其含义。
<hgroup> 应该在有一组标题时使用。在这里，我们还使用它在弹性项目之间提供一些间距，这很好。
标题标签是块级元素，不需要将宽度值定义为100%。
这里不需要使用浮动，都可以用flexbox来完成。

编辑：

编辑你的问题我注意到了这一点：

使所有标题标签的所有内部元素也具有相同的高度...

有些事情应该很清楚，flexbox 不是二维布局，这意味着您只能在 same flex-容器。

你想要的是以某种方式继承不同弹性容器中相似标签的高度，这是不可能的。

您当然可以尝试执行以下操作：

/* #region General Styling */

body {
  margin: 0;
  background-color: peachpuff;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
h2,
h3,
h4,
h6 {
  padding: 1em;
  margin: 0 10px;
}
h2 {
  background-color: tomato;
}
h3 {
  background-color: gold;
}
h4 {
  background-color: dodgerblue;
}
h6 {
  background-color: mediumseagreen;
}
/* #endregion*/

/* Quick Demo */

section {
  display: flex;
  flex-direction: column;
  margin-bottom: 1em;
}
hgroup {
  display: flex;
  flex: 1;
}
h2 {
  margin-top: 1em;
}
h2,
h3,
h4,
h6 {
  flex: 1;
}

<section>
  <hgroup>
    <h2 contenteditable>h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2</h2>
    <h2 contenteditable>h2</h2>
    <h2 contenteditable>h2</h2>
  </hgroup>
  <hgroup>
    <h3 contenteditable>h3</h3>
    <h3 contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae tellus at purus bibendum euismod eu vehicula odio.</h3>
    <h3 contenteditable>h3</h3>
  </hgroup>
  <hgroup>
    <h4 contenteditable>h4</h4>
    <h4 contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae tellus at purus bibendum euismod eu vehicula odio.</h4>
    <h4 contenteditable>h4</h4>
  </hgroup>
  <hgroup>
    <h6 contenteditable>h6</h6>
    <h6 contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae tellus at purus bibendum euismod eu vehicula odio.</h6>
    <h6 contenteditable>h6</h6>
  </hgroup>
  <hgroup>
    <h2 contenteditable>h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2</h2>
    <h2 contenteditable>h2</h2>
    <h2 contenteditable>h2</h2>
  </hgroup>
  <hgroup>
    <h3 contenteditable>h3</h3>
    <h3 contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae tellus at purus bibendum euismod eu vehicula odio.</h3>
    <h3 contenteditable>h3</h3>
  </hgroup>
  <hgroup>
    <h4 contenteditable>h4</h4>
    <h4 contenteditable>h4</h4>
    <h4 contenteditable>h4</h4>
  </hgroup>
  <hgroup>
    <h6 contenteditable>h6</h6>
    <h6 contenteditable>h6</h6>
    <h6 contenteditable>h6</h6>
  </hgroup>
</section>

但我不建议这样做，请使用 javascript。

【讨论】：

感谢您花时间解释。不幸的是，您的解决方案不能解决我的问题，但正如您所解释的那样，flexbox 是不可能的。我将不得不为此使用JS。如果 h3 中的内容是唯一的动态内容，您的解决方案会起作用，但在我的情况下，h2 和 h3 中的内容是动态的，只有最后 2 个标题可能不会增加。