css - 在不向 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>

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

不显示全部，但从不中断

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

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>