Flexbox儿童的孩子泛滥

Question

我的Flex的孩子们自己也有孩子，因为其中一个孩子( <img>我使用object-fit:cover来确保所有的图像块都是相同的高度/宽度)。

问题是第二个子(<h4>标记)没有包含在Flex中，并且似乎溢出。

到目前为止，我的努力已经导致了<h4>标签的安装，但是object-fit: cover停止了工作。

这有可能做到吗？

​

#content {
  margin-left: 18%;
  margin-right: 18%;
  /*border: 1px solid black;*/
}

h1.page-title {
  margin-top: 0;
  padding: 39px 0px 39px 150px;
}

.image-pane {
  display: flex;
  background-color: rgba(0, 0, 0, 0.2);
}

.image-tile {
  margin: 1%;
  width: 48%;
}
span.image-tile>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.2);
}
.image-text {
  font-family: aftaSansRegular;
  text-align: center;
}

<div id="content">
  <h1 class="page-title">
    Galleries
  </h1>

  <div class="image-pane">
    <span class="image-tile">
      <img src="http://i.turner.ncaa.com/ncaa/big/2016/03/21/379123/1458530071096-mbk-312-wisconsin-xavier-1920.jpg-379123.960x540.jpg" alt="Basketball Image 01"/>
      <h4 class="image-text">
        Sports
      </h4>
    </span>

    <span class="image-tile">
      <img src="https://www.bahn.com/en/view/mdb/pv/agenturservice/2011/mdb_22990_ice_3_schnellfahrstrecke_nuernberg_-_ingolstadt_1000x500_cp_0x144_1000x644.jpg" alt="Train Image 01"/>
      <h4 class="image-text">
        Models
      </h4>
    </span>
  </div>
</div>

​

在回复时，请你解释一下为什么会这样发生，这样我才能理解它，而不是纠正它:'P

Answer 1

当您告诉一个元素为height: 100%时，它占据了容器的全部高度。因此，没有留给兄弟姐妹的空间。这就是为什么在容器之外呈现h4的原因。

一个简单的解决方法是使flex容器(.image-tile)的子容器也成为一个flex容器。

然后，孩子们(图像和标题)变成了灵活的项目。使用flex-direction: column，它们垂直叠加。

因为对flex项的初始设置是flex-shrink: 1和flex-wrap: nowrap，所以允许使用height: 100%的映像缩小，以便所有项目都能在容器中容纳。

然后，您需要覆盖flex最小高度默认值(min-height: auto)，因此图像和标题都适合于容器内。这里有更多细节：

• Why doesn't flex item shrink past content size?

另外，如果要在flex容器中使用百分比边距(或填充)，请考虑以下几点：

• Why doesn't percentage padding / margin work on flex items in Firefox?

​

#content {
  margin-left: 18%;
  margin-right: 18%;
}

h1.page-title {
  margin-top: 0;
  padding: 39px 0px 39px 150px;
}

.image-pane {
  display: flex;
  background-color: rgba(0, 0, 0, 0.2);
}

.image-tile {
  display: flex;           /* new */
  flex-direction: column;  /* new */
  margin: 1%;
  width: 48%;
}

span.image-tile > img {
  min-height: 0;           /* new */
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.2);
}

.image-text {
  font-family: aftaSansRegular;
  text-align: center;
}

<div id="content">
  <h1 class="page-title">
    Galleries
  </h1>

  <div class="image-pane">
    <span class="image-tile">
      <img src="http://i.turner.ncaa.com/ncaa/big/2016/03/21/379123/1458530071096-mbk-312-wisconsin-xavier-1920.jpg-379123.960x540.jpg" alt="Basketball Image 01"/>
      <h4 class="image-text">
        Sports
      </h4>
    </span>

    <span class="image-tile">
      <img src="https://www.bahn.com/en/view/mdb/pv/agenturservice/2011/mdb_22990_ice_3_schnellfahrstrecke_nuernberg_-_ingolstadt_1000x500_cp_0x144_1000x644.jpg" alt="Train Image 01"/>
      <h4 class="image-text">
        Models
      </h4>
    </span>
  </div>
</div>

​

Answer 2

图像高度100%是创建问题，因为100%的高度由图像本身由于父flex属性占用，而flex使孩子的高度达到100%。这就是为什么头衔不属于家长的原因。

因此，如果你想使它完美，添加一些像素高度在图像中，如300 in或任何根据您的设计。

​

#content {
  margin-left: 18%;
  margin-right: 18%;
  /*border: 1px solid black;*/
}

h1.page-title {
  margin-top: 0;
  padding: 39px 0px 39px 150px;
}

.image-pane {
  display: flex;
  background-color: rgba(0, 0, 0, 0.2);
}

.image-tile {
  margin: 1%;
  width: 48%;
}
span.image-tile>img{
  width: 100%;
  height: 200px;
  object-fit: cover;
  box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.2);
}
.image-text {
  font-family: aftaSansRegular;
  text-align: center;
}

<div id="content">
  <h1 class="page-title">
    Galleries
  </h1>

  <div class="image-pane">
    <span class="image-tile">
      <img src="http://i.turner.ncaa.com/ncaa/big/2016/03/21/379123/1458530071096-mbk-312-wisconsin-xavier-1920.jpg-379123.960x540.jpg" alt="Basketball Image 01"/>
      <h4 class="image-text">
        Sports
      </h4>
    </span>

    <span class="image-tile">
      <img src="https://www.bahn.com/en/view/mdb/pv/agenturservice/2011/mdb_22990_ice_3_schnellfahrstrecke_nuernberg_-_ingolstadt_1000x500_cp_0x144_1000x644.jpg" alt="Train Image 01"/>
      <h4 class="image-text">
        Models
      </h4>
    </span>
  </div>
</div>

​