【问题标题】：Is this flexbox layout possible without adding more to the HTML structure?在不向 HTML 结构添加更多内容的情况下，这种 flexbox 布局是否可行？
【发布时间】：2017-01-09 05:50:00
【问题描述】：

我想知道我在下图中绘制的布局是否可以使用 flexbox 和这个 HTML 结构：

<div class="box">
    <img src="url..." alt="" />
    <h5>Lorem Ipsum</h5>
    <p>Lorem Ipsum Dolor Sit Amet...</p>
</div>

如果这可以用 flexbox 来完成，而不需要在里面添加更多的盒子，那就太好了。

【问题讨论】：

如果.box 的高度已知，是的，但除此之外，不，不是真的。
为什么选择 flexbox？将图像向左或向右浮动
如果您希望图像完全响应，建议您也将其包装在 div 中。
@blonfu 确定您可以通过多种方式获得此解决方案，但我正在寻找一种使用 flexbox 使用给定结构的方法。
我只是好奇使用 flexbox 代替任何其他技术的原因

标签： css layout flexbox flexboxgrid

【解决方案1】：

对于固定的图像宽度和高度，这是可能的。主要思想在下面的sn-p中。

.box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
  height: 300px;
}

.img {
    width: 300px; height: 300px;
}

h5, p {
  /* 100% - image width - margin between */
  width: calc(100% - 300px - 16px); 
}

由于父级的高度与图像的高度相同，因此内容溢出并向右包裹。然后我们必须手动设置宽度，否则它将达到父级的 100%。

.box {
  background-color: #ddd;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
  align-content: space-between;
}

.img {
  background-color: #333;
  color: #ddd;
  width: 300px;
  height: 300px;
}

h5, p {
  padding: 0;
  margin: 0;
  background-color: #ccc;
  /* 100% - image width - margin between */
  width: calc(100% - 300px - 16px); 
}

h5 {
  font-size: 18px;
  margin-bottom: 8px;
}

.box:nth-child(even) .img {
  order: 3;
}

<div class="box">
    <div class="img">&lt;img&gt;</div>
    <h5>Lorem Ipsum</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus</p>
</div>

<div class="box">
    <div class="img">&lt;img&gt;</div>
    <h5>Lorem Ipsum</h5>
    <p>Lorem Ipsum Dolor Sit Amet...</p>
</div>

<div class="box">
    <div class="img">&lt;img&gt;</div>
    <h5>Lorem Ipsum</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a  </p>
</div>

全高段落

您可能希望将段落一直延伸到底部（可能在此处添加一些链接）。它很容易扩展，因此您可以将 p 转换为 flexbox 以将某些内容捕捉到底部，例如（此示例不在下面的演示中，您只能通过灰色背景注意到这一点）。

.box {
  /* ... */
  justify-content: space-between;
}

p {
  flex-grow: 1;
}

.box {
  background-color: #ddd;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
  align-content: space-between;
  justify-content: space-between;
}

.img {
  background-color: #333;
  color: #ddd;
  width: 300px;
  height: 300px;
}

h5, p {
  padding: 0;
  margin: 0;
  background-color: #ccc;
  /* 100% - image width - margin between */
  width: calc(100% - 300px - 16px); 
}

h5 {
  font-size: 18px;
  margin-bottom: 8px;
}

p {
  flex-grow: 1;
}

.box:nth-child(even) .img {
  order: 3;
}

<div class="box">
    <div class="img">&lt;img&gt;</div>
    <h5>Version 2</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus</p>
</div>

<div class="box">
    <div class="img">&lt;img&gt;</div>
    <h5>Lorem Ipsum</h5>
    <p>Lorem Ipsum Dolor Sit Amet...</p>
</div>

<div class="box">
    <div class="img">&lt;img&gt;</div>
    <h5>Lorem Ipsum</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. </p>
</div>

上述两个版本都会在文本无法容纳时中断（尝试更改浏览器窗口大小）。

不显示全部，但从不中断

如果您不希望段落中断和剪切不适合overflow: hidden 的文本，您可以为该段落设置max-height。

p {
  max-height: 250px;
  overflow: hidden;
}

.box {
  background-color: #ddd;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
  align-content: space-between;
  justify-content: space-between;
}

.img {
  background-color: #333;
  color: #ddd;
  width: 300px;
  height: 300px;
}

h5, p {
  padding: 0;
  margin: 0;
  background-color: #ccc;
  /* 100% - image width - margin between */
  width: calc(100% - 300px - 16px); 
}

h5 {
  font-size: 18px;
  margin-bottom: 8px;
}

p {
  flex-grow: 1;
}

.box:nth-child(even) .img {
  order: 3;
}

p {
  max-height: 250px;
  overflow: hidden;
}

<div class="box">
    <div class="img">&lt;img&gt;</div>
    <h5>Version 3</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus</p>
</div>

<div class="box">
    <div class="img">&lt;img&gt;</div>
    <h5>Lorem Ipsum</h5>
    <p>Lorem Ipsum Dolor Sit Amet...</p>
</div>

<div class="box">
    <div class="img">&lt;img&gt;</div>
    <h5>Lorem Ipsum</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus. </p>
</div>

【讨论】：

感谢您的详细回答。不完全是什么对我有用，但很高兴知道这可能是一个解决方案。
您还可以左右浮动图像，并让其余部分保持正常流动。但既然你要了 flexbox，我不想作弊。