flexbox容器中的前导图像

时间：2018-07-06 05:42:37

标签： html css flexbox

我一直在构建flexbox容器-实际上是其中的行-在某些容器中存在领先的图像。令我惊讶的是，每当我将带有领先图像的flexbox容器和其他类型的容器（不是图像排在最前面）放入一排flexbox容器时，都会发生意外。

HTML：

<div class="container">
  <img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
  <span>Bam</span>
</div>
<div class="container">
  <span>Bom</span>
  <span>Bom</span>
</div>
<div class="container">
  <span>Bim</span>
  <span>Bim</span>
</div>

CSS：

.container {
  display: inline-flex;
  background-color: tomato;
}
.image {
  height: 28px;
}

请参见以下示例：https://codepen.io/GuRuGu/pen/KeYGwv

我真的很想知道为什么会这样，因为我现在很茫然。

3 个答案:

答案 0 :(得分：1)

我不知道这是否是您的解决方案，也许我误解了这个问题。但是我认为，如果要对齐所有容器，则可以使用包装器包装所有容器，然后将其添加为display : flex;。使用该配置，也许您不再需要在容器上使用display: inline-flex了。我让他们在下面的代码上，因为我不知道您的限制是什么。

这是经过修改的代码。我在容器周围的div包装器上添加了.supracontainer类。您可以使用supracontainer类上的align-items flexbox属性来控制垂直对齐。

.container {
	display: inline-flex;
	background-color: tomato;
	align-items: stretch;
}
.supracontainer{
	display: flex;
}
.image {
	height: 28px;
}
<h2>Leading images</h2>
<div class="supracontainer">
<div class="container">
	<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
	<span>Bam</span>
</div>
<div class="container">
	<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
	<span>Bom</span>
</div>
<div class="container">
	<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
	<span>Bim</span>
</div>
</div>

<h2>Leading image & empty containers</h2>
<div class="supracontainer">
<div class="container">
	<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
	<span>Bam</span>
</div>
<div class="container">
	<span>Bom</span>
	<span>Bom</span>
</div>
<div class="container">
	<span>Bim</span>
	<span>Bim</span>
</div>
</div>

<h2>Trailing image & empty containers</h2>
<div class="supracontainer">
<div class="container">
	<span>Bam</span>
</div>
<div class="container">
	<span>Bom</span>
</div>
<div class="container">
	<span>Bim</span>
	<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
</div>

<h2>Leading images & trailing images</h2>
<div class="supracontainer">
<div class="container">
	<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
	<span>Bam</span>
</div>
<div class="container">
	<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
	<span>Bom</span>
</div>
<div class="container">
	<span>Bim</span>
	<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
<div class="container">
	<span>Bim</span>
	<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
</div>

答案 1 :(得分：1)

Alex的answer可能是最好的，因为它更灵活，但这是一种快速的选择：如果您的图像始终是固定高度（在演示中为28px），则可以制作{{1 }}元素的高度相同，并使其与container对齐（因为它们是内联元素）：

vertical-align

答案 2 :(得分：0)

您可以使用order属性在flex元素内更改项目顺序：

.container {
	display: inline-flex;
	background-color: tomato;
	align-items: stretch;
}
.supracontainer{
	display: flex;
}
.image {
	height: 28px;
    order:0;
}
span{
    order:1;
}
<h2>Leading images</h2>
<div class="supracontainer">
<div class="container">
	<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
	<span>Bam</span>
</div>
<div class="container">
	<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
	<span>Bom</span>
</div>
<div class="container">
	<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
	<span>Bim</span>
</div>
</div>

<h2>Leading image & empty containers</h2>
<div class="supracontainer">
<div class="container">
	<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
	<span>Bam</span>
</div>
<div class="container">
	<span>Bom</span>
	<span>Bom</span>
</div>
<div class="container">
	<span>Bim</span>
	<span>Bim</span>
</div>
</div>

<h2>Trailing image & empty containers</h2>
<div class="supracontainer">
<div class="container">
	<span>Bam</span>
</div>
<div class="container">
	<span>Bom</span>
</div>
<div class="container">
	<span>Bim</span>
	<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
</div>

<h2>Leading images & trailing images</h2>
<div class="supracontainer">
<div class="container">
	<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
	<span>Bam</span>
</div>
<div class="container">
	<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
	<span>Bom</span>
</div>
<div class="container">
	<span>Bim</span>
	<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
<div class="container">
	<span>Bim</span>
	<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
</div>

相关问题
最新问题