Flexbox - 左侧为文本，右侧为图像的矩形

Question

制作一个仪表板，其中有一列填充矩形以访问不同的应用程序。

每个应用程序都表示为一个灰色矩形，其中包含应用程序名称和图像。

目前看起来是这样的。所有东西都垂直对齐在中心正是我想要的。但我希望图像出现在矩形的右侧（请参阅帖子上的最终屏幕截图）。

单个应用程序框的标记如下所示

<div class="apps-container">

   <a href="#">
       <div class="apps-container__app-box">
           <div style="display: flex; align-items: center;">
               <h4>App name</h4>
               <img src="app-logo.svg">
           </div>
       </div>
   </a>

   <!-- Other apps in equivalent .apps-container__app-box -->

</div>

灰色矩形上的任何位置都应该可以单击来访问该应用程序，这就是它被

<a href>

包围的原因。该

a

元素的 CSS 包含

display: flex;
align-items: center;

如果删除该 CSS，那么它会在框的顶部垂直呈现，而不是像这样在中心呈现。

在

.apps-container__app-box

内，应用程序名称和图像位于

<div>

内。我添加了一些内联CSS，我尝试了各种方法。目前它设置为

display: flex; align-items: center;

，与父级 <a href>

相同的规则

。如果我删除该内联 CSS，它将返回到第二个屏幕截图中的显示方式，其中垂直对齐不再位于中心。

我采用了使用“弹性盒内的弹性盒”的方法，来自如何在弹性盒内垂直对齐文本？

我不明白如何做到这一点，也不明白为什么改变这些规则中的任一会以同样的方式影响它。我认为规则可以独立使用，即使用父级

<a href>

来做垂直居中，然后在

.apps-container__app-box

上使用其他一些规则来控制文本和图像的布局。

所需的输出应如下所示：

有人能指出我正确的方向吗？

Answer 1

我认为你需要的CSS/样式是：

justify-content: space between

但是为了清楚地看到变化，您需要 div 有一个宽度，例如 200px。