Question

我使用flexbox创建了一个网格/盒子/卡片布局，所以所有项目都是相同的高度。布局每行有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的高级用户，而且处于初始阶段

非常感谢您的帮助。

Answer 1

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

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

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

为了清楚起见，在此重复一遍：

flex：<positive-number>：

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

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

CODE SNIPPET

＆＃13;

/* #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. */
}

＆＃13;

<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>

＆＃13;

<强> jsFiddle

备注：

您应该使用 HTML5语义元素，以便您的标记实际上向浏览器和我们开发人员描述其含义。
拥有一组标题时，应使用
<hgroup>。在这里我们还使用它来在flex-items之间给出一些间距，这很不错。

标题标记是块级元素，您无需将宽度值定义为100%。

这里不需要使用浮动，所有都可以使用flexbox。

修改

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

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

某些内容应该清楚，flexbox不是二维布局，这意味着您只能在相同内的行或列方向分发flex-items柔性容器中。

你想要的是以某种方式继承不同flex-container中类似标签的高度，这是不可能的。

你可以尝试做类似的事情：

＆＃13;
＆＃13;
/* #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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

但我不推荐它，使用javascript。

如何在不使用jQuery的情况下为flexbox网格/盒子/卡片的内部元素提供相同的高度？

代码段：

1 个答案: