我是使用Flexbox的第一步。我在这里完成了此操作：http : //goo.gl/fPbdhZ
如何将图像标题移到图像下方？
<div class="flexbox-container">
<div class="flexbox-child">
<img src="http://placehold.it/300x400"><br>
<h4>This title should go below the image</h4>
</div>
<div class="flexbox-child">
<img src="http://placehold.it/200x400">
<h4>This title should go below the image</h4>
</div>
<div class="flexbox-child">
<img src="http://placehold.it/300x300">
<h4>This title should go below the image</h4>
</div>
</div>
<div class="flexbox-container">
<div class="flexbox-child">
<img src="http://placehold.it/200x350">
</div>
<div class="flexbox-child">
<img src="http://placehold.it/400x200">
</div>
</div>
的CSS
.flexbox-container {
height: 50%;
padding: 15px;
display: flex;
align-items: center;
align-content: center;
justify-content: space-around;
.flexbox-child {
height: 100%;
padding: 0 15px;
display: flex;
align-items: center;
img {
max-height: 100%;
margin: 0 auto;
}
}
}
h4和img元素并排的原因是您将其父元素（.flexbox-child）设置为具有display:flex。
display:flex启用flexbox布局系统，但它还会为其他各种与flexbox相关的属性打开一堆默认值。在这种情况下，您看到的行为是由默认值引起的，默认flex-direction值为flex-direction: row，导致元素并排显示，而不是彼此并排显示。flex-direction设置flexbox容器中的元素将流动的主轴/方向。您可以从左到右，从右到左，向上或向下进行操作。如果您想了解更多信息，CSS Tricks对flexbox的所有方面都有很好的指导。
因此，您需要做的就是覆盖flex-direction的默认值。在这种情况下，其设置就像flex-direction:column;在上一样简单.flexbox-child。这里的例子。希望对您有所帮助！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句