Flexbox 图像和文本

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% 宽，实际需要的是 "shrink-wrap"效果。

为此你需要 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>

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

Flexbox 图像和文本

Flexbox image and text

css

flexbox