Question

使用Flexbox时遇到一些困难。我想要实现的是拥有2个项目。

第一个是图像（任意大小），第一个项目的大小（高度和宽度）应该与图像的大小相同）而第二个项目是文本，div的宽度文本必须是容器的剩余大小，高度应该是图像的高度。

.container {
  display: flex;  
  flex-flow: row;
}
.image {
  background: hotpink;
   max-width: 100%;
   width : auto;
  flex: 0 1 auto;
}
.title {
  text-align: center;
  flex: 2;
  background: deepskyblue;
}

Please see this

请让我知道我的代码发生了什么。

TIA！

Answer 1

目前还不完全清楚你要做的是什么，但问题是，我怀疑，你的包装/父div是100％宽，实际需要的是“收缩包装”效果。

为此，您需要display:inline-flex而非display:flex ...然后事情变得更加容易。

* {
  margin: 0;
  padding: 0;
}
.container {
  display: inline-flex;
  font-weight: bold;
  vertical-align: top;
}
.main {
  background: deepskyblue;
  flex: 1;
  text-align: center;
}
.image {
  background: hotpink;
  flex: 1;
  height: 100%;
}

<div class="container">
  <div class="image">
    <img src="http://fc08.deviantart.net/fs71/f/2012/234/7/6/sample__50x50_blink_pony_icon_by_tripperwitch-d5c3pne.gif">
  </div>
  <div class="main">
    <p>Title.</p>
  </div>
</div>

<div class="container">
  <div class="image">
    <img src="http://lorempixel.com/image_output/food-q-c-200-200-1.jpg" />
  </div>
  <div class="main">
    <p>Title.</p>
  </div>
</div>

最后一点......看到图像下面有多余的空间？...这是一个与HTML占用空间中的空白一致的问题。在处理与inline-block元素相同的问题时，可以在SO上找到补救措施。

Flexbox图像和文本

1 个答案: