如果不向 HTML 结构添加更多内容，这种 flexbox 布局是否可行？

Question

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

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

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

Answer 1

对于固定的图像宽度和高度，这是可能的。主要思想在以下片段中。

.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>

上面两个版本在文本不适合时会中断（尝试更改浏览器window大小）。

没有显示全部，但从未中断

如果您不希望它中断和剪辑不适合 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>

如果不向 HTML 结构添加更多内容，这种 flexbox 布局是否可行？

Is this flexbox layout possible without adding more to the HTML structure?

css

layout

flexbox

flexboxgrid

全高款

没有显示全部，但从未中断