我需要制定哪些 CSS 规则才能使提供的 DIVS 相对于其容器元素具有相同的高度？

Question

我正在使用 flexbox 对齐 Bootstrap 中的一组项目，这允许每一行具有相同的高度。当前对每一行和每个项目使用 display:flex，所有项目高度都相等，除了 div 等内容区域，即这些项目容器内部的 divs。是否有解决方案，使每个联系人 div 的身高都相等，而不是每个人 div 的身高？

向每一行和每个人添加 flexbox div 在联系人 div 区域下添加额外的填充：

我希望这些区域具有相同的高度：

=== HTML（使用Angular）===

<div class="container" ng-controller="staff" >
<h1>Who We Are</h1>
<div class="col-sm-12" id="staff">
<div class="row" ng-repeat="peoples in chunkedData()">
        <div class="col-sm-3 text-center person" ng-repeat="people in peoples">
        <div class="person--border">
        <img src="{{people.img}}">
        <div class="content">
            <h4>{{people.name}}</h4>
            <h5>{{people.title}}</h5>
            <p>{{people.bio}}</p>
        </div>
            <div class="contact">
                <a href="mailto:{{people.email}}" ng-if="people.email"><span class="glyphicon glyphicon-envelope"></span></a>
                <a href="tel:{{people.phone}}" ng-if="people.phone"><span class="glyphicon glyphicon-earphone"></span></a>
                <a href="{{people.linkedin}}" ng-if="people.linkedin"><span class="fa fa-linkedin"></span></a>
            </div>
        </div>
        </div>
    </div>
</div>

=== CSS ===

.row { display: flex;  }
.person { display: flex; }

我也尝试了以下但没有成功：

.person { display: flex; }
.person .content { content-align: flex; display: flex; }

Answer 1

Flexbox 不会使 non-sibling 个元素具有相同的高度。

虽然在 row 上设置 display:flex 将使所有 children 具有相同的高度，但您仍然必须告诉每个 'person' 是一列，然后分配 flex-directions 和 flex 属性使列填充各自的 parents.

此外，您正在与 Bootstrap 的正常布局作斗争，因此某些类需要加倍。

我假设所有图像的高度都相同，并且图标 divs 也将是相同的高度。所以 "content" div 可以展开以占据任何剩余的高度。

.row {
  display: flex; /* all the persons ar ethe same height */
}

.col-sm-3.person {
  display: flex;
  flex-direction: column; /* each person is now a column */
}

.col-sm-3.person .person--border {
  display: flex;
  flex-direction: column; /* inner div also a column */
  flex:1; /* and 100% high */
  border:1px solid grey;
}

.col-sm-3.person .content {
  flex:1; /* make this element expand to fill all remaining space */
  background: lightgreen;
}

.row {
  display: flex;
}
.col-sm-3.person {
  display: flex;
  flex-direction: column;
}
.col-sm-3.person .person--border {
  display: flex;
  flex-direction: column;
  flex: 1;
  bordeR: 1px solid grey;
}
.col-sm-3.person .content {
  flex: 1;
  background: lightgreen;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-12" id="staff">
  <div class="row">

    <div class="col-sm-3 text-center person">

      <div class="person--border">
        <img src="http://lorempixel.com/image_output/people-q-c-250-250-10.jpg">

        <div class="content">
          <h4>Name</h4>
          <h5>Title</h5>
          <p>Bio: Lorem ipsum dolor sit amet.</p>
        </div>

        <div class="contact">
          <a href="mailto:{{people.email}}" ng-if="people.email"><span class="glyphicon glyphicon-envelope"></span></a>
          <a href="tel:{{people.phone}}" ng-if="people.phone"><span class="glyphicon glyphicon-earphone"></span></a>
          <a href="{{people.linkedin}}" ng-if="people.linkedin"><span class="fa fa-linkedin"></span></a>
        </div>

      </div>

    </div>
    <div class="col-sm-3 text-center person">

      <div class="person--border">
        <img src="http://lorempixel.com/image_output/people-q-c-250-250-10.jpg">

        <div class="content">
          <h4>Name</h4>
          <h5>Title</h5>
          <p>Bio: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, sit.</p>
        </div>

        <div class="contact">
          <a href="mailto:{{people.email}}" ng-if="people.email"><span class="glyphicon glyphicon-envelope"></span></a>
          <a href="tel:{{people.phone}}" ng-if="people.phone"><span class="glyphicon glyphicon-earphone"></span></a>
          <a href="{{people.linkedin}}" ng-if="people.linkedin"><span class="fa fa-linkedin"></span></a>
        </div>

      </div>

    </div>

    <div class="col-sm-3 text-center person">

      <div class="person--border">
        <img src="http://lorempixel.com/image_output/people-q-c-250-250-10.jpg">

        <div class="content">
          <h4>Name</h4>
          <h5>Title</h5>
          <p>Bio: Lorem ipsum dolor sit amet.</p>
        </div>

        <div class="contact">
          <a href="mailto:{{people.email}}" ng-if="people.email"><span class="glyphicon glyphicon-envelope"></span></a>
          <a href="tel:{{people.phone}}" ng-if="people.phone"><span class="glyphicon glyphicon-earphone"></span></a>
          <a href="{{people.linkedin}}" ng-if="people.linkedin"><span class="fa fa-linkedin"></span></a>
        </div>

      </div>

    </div>
    <div class="col-sm-3 text-center person">

      <div class="person--border">
        <img src="http://lorempixel.com/image_output/people-q-c-250-250-10.jpg">

        <div class="content">
          <h4>Name</h4>
          <h5>Title</h5>
          <p>Bio: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, sit.</p>
        </div>

        <div class="contact">
          <a href="mailto:{{people.email}}" ng-if="people.email"><span class="glyphicon glyphicon-envelope"></span></a>
          <a href="tel:{{people.phone}}" ng-if="people.phone"><span class="glyphicon glyphicon-earphone"></span></a>
          <a href="{{people.linkedin}}" ng-if="people.linkedin"><span class="fa fa-linkedin"></span></a>
        </div>

      </div>

    </div>

    <div class="col-sm-3 text-center person">

      <div class="person--border">
        <img src="http://lorempixel.com/image_output/people-q-c-250-250-10.jpg">

        <div class="content">
          <h4>Name</h4>
          <h5>Title</h5>
          <p>Bio: Lorem ipsum dolor sit amet.</p>
        </div>

        <div class="contact">
          <a href="mailto:{{people.email}}" ng-if="people.email"><span class="glyphicon glyphicon-envelope"></span></a>
          <a href="tel:{{people.phone}}" ng-if="people.phone"><span class="glyphicon glyphicon-earphone"></span></a>
          <a href="{{people.linkedin}}" ng-if="people.linkedin"><span class="fa fa-linkedin"></span></a>
        </div>

      </div>

    </div>

  </div>

</div>

Codepen Demo

我需要制定哪些 CSS 规则才能使提供的 DIVS 相对于其容器元素具有相同的高度？

What CSS rules would I need to put in place to make the provided DIVS equal heights relative to their container elements?

css

flexbox