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

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

期望结果：

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

这是我的密码：

**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;

**HTML**
无声之歌
丹尼尔·罗森
乱数假文
乱数假文
**CSS**
页脚。歌曲信息{
最大宽度：15%；
显示器：flex；
}
页脚。歌曲信息span{
显示器：flex；
弯曲方向：立柱；
身高：50%；
柔性包装：包装；

}

我仍然明白这一点：

---

而我希望.song name和.song volume是初始屏幕截图中的列。

您正在尝试将

display:flex

和

flex direction:column

添加到这两个跨距中

在其周围添加一个容器，代码应该如下所示（我确实添加了一些可爱的样式）：

页脚{
背景色：黑色；
宽度：400px；
}
.歌曲信息{
显示器：flex；
对齐项目：居中；
边缘顶部：20px；
字体系列：helvetica；
颜色：#fff；
填充：10px；
}
.song信息img{
高度：60px；
宽度：60px；
右边距：20px；
对象匹配：包含；
}
.艺术家容器{
显示器：flex；
弯曲方向：立柱；
}
.歌名{
字体大小：粗体；
边缘底部：5px；
}

埃弗夸克
泰勒，创造者

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