如何使用flexbox在图像右侧将文本分成两个相等的列（而不是行）？答案

【问题标题】：How to divide text into two equal columns (instead of rows) on the right of the image with flexbox?如何使用flexbox在图像右侧将文本分成两个相等的列（而不是行）？
【发布时间】：2020-12-05 04:30:03
【问题描述】：

我正在尝试使用 flexbox 在 Spotify 的 Web 界面中创建类似于此布局的内容：

想要的结果：
.

我的想法是我希望有两个相等的列，左右部分，其中左边是高度为 100% 的图像，右边部分将显示在两个相等的列中。问题是我无法将正确的两个文本行显示为列，即使我尝试使用 flex-direction: column 和 flex-wrap: wrap 在父项和 flex 项上。

这是我的代码：

**HTML**
  <footer>
    <div class="song-info">
        <img src="https://via.placeholder.com/56x56" alt="Song cover">
        <span class="song-name">Silent Song</span>
        <span class="artist-name">Daniel Rossen</span>
    </div>
    <div class="song-controls">Lorem Ipsum</div>
    <div class="song-volume">Lorem Ipsum</div>
</footer>
**CSS**
footer .song-info {
   max-width: 15%;
   display: flex;
}

footer .song-info span {
   display: flex;
   flex-direction: column;
   height: 50%;
   flex-wrap: wrap;

}

我还是明白了：

虽然我希望 .song-name 和 .song-volume 成为初始屏幕截图中的列。

【问题讨论】：

您当前状态的屏幕截图似乎与您对“右侧部分...显示在两个相等的列中”的描述相符。来自 Spotify 的屏幕截图将右侧部分组织为行。你有可能在这里混淆了你的定义吗？
将您的歌曲和艺术家跨度包装到一个新元素中或使用网格而不是 flex（我更喜欢网格，这样您就不必添加额外的元素）
谢谢@arieljuod，会试试的

标签： html css flexbox

【解决方案1】：

您正在尝试将display: flex 和flex-direction:column 添加到两个跨度中。

在它周围添加一个容器，代码应该是这样的（我确实添加了一些可爱的样式）：

footer {
  background-color: black;
  width: 400px;
}

.song-info {
  display: flex;
  align-items: center;
  margin-top: 20px;
  font-family:helvetica;
  color: #fff;
  padding: 10px;
}

.song-info img {
  height: 60px;
  width: 60px;
  margin-right: 20px;
  object-fit: contain;
}

.artist-container {
  display: flex;
  flex-direction: column;
}

.song-name {
  font-weight: bold;
  margin-bottom: 5px;
}

<footer>
  <div class="song-info">
    <img src="https://images.genius.com/60712a7b6cbcc792502d877fb9a170c5.1000x1000x1.jpg" alt="Song cover">
    <div class="artist-container">
      <span class="song-name">EARFQUAKE</span>
      <span class="artist-name">Tyler, The Creator</span>
    </div>
  </div>
</footer>

【讨论】：