程序员经验分享-hwhale

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

2024-03-24

我使用 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 protected] /cdn-cgi/l/email-protection</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 protected] /cdn-cgi/l/email-protection</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 protected] /cdn-cgi/l/email-protection</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 protected] /cdn-cgi/l/email-protection</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 protected] /cdn-cgi/l/email-protection</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 protected] /cdn-cgi/l/email-protection</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 protected] /cdn-cgi/l/email-protection</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 protected] /cdn-cgi/l/email-protection</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 protected] /cdn-cgi/l/email-protection</span></h4>
      <h6 class="col-100">Subtext</h6>
    </div>
  </div>

</div>

我不是 Flexbox 的高级用户，并且处于初始阶段

非常感谢您的帮助。


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

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

Check this https://stackoverflow.com/q/40031226/4305494 and this https://stackoverflow.com/q/40025064/4305494类似的问题和答案。

为了清楚起见，我在这里重复一遍：

flex: <positive-number>:

相当于弹性：<positive-number>1 0. 制作弹性项目 灵活并将弹性基础设置为零，从而产生一个项目 接收 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 protected] /cdn-cgi/l/email-protection</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 protected] /cdn-cgi/l/email-protection</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 protected] /cdn-cgi/l/email-protection</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
      <li>
        <hgroup>
          <h2>Name</h2>
          <h3>Address, Address</h3>
          <h4>
          <span>123456</span>
          <span>[email protected] /cdn-cgi/l/email-protection</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 protected] /cdn-cgi/l/email-protection</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 protected] /cdn-cgi/l/email-protection</span>
        </h4>
          <h6>Subtext</h6>
        </hgroup>
      </li>
    </ul>
  </section>
</main>

jsFiddle https://jsfiddle.net/rickyruizm/4eb7f0u1/

Notes:

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

EDIT:

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

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

有件事应该说清楚flexbox不是二维布局，这意味着您只能将弹性项目分布在一行中or内的列方向same弹性容器。

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

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

/* #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 来实现。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery

html

css

flexbox

在不使用 jQuery 的情况下，如何使 Flexbox 网格/盒子/卡片的内部元素具有相同的高度？ 的相关文章