Question

我的Flex Box的孩子们自己有孩子，对于其中一个孩子（<img>我使用object-fit:cover来确保所有的图像拼贴都具有相同的高度/宽度）

问题是第二个子项（<h4>标记）未包含在Flex Box中并且似乎溢出。

到目前为止，我的努力已导致<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-shrink: 1和flex-wrap: nowrap，因此允许缩小height: 100%的图片，以便所有项目都适合容器。

然后，您需要覆盖弹性最小高度默认值（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?

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

图像高度100％正在产生问题，因为由于父Flex属性作为flex而由图像本身占据的100％高度使得孩子的高度为100％。这就是为什么标题远离父母div。

因此，如果您想要完美，请根据您的设计在300px或其他任何图像中添加一些像素高度。

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

Flexbox儿童的孩子们满溢

2 个答案: