css - 文本列在 flex 容器中不均匀对齐

Question

我有一个简单的 flex 容器，其中包含三个 flex 元素。一个是元素符号列表，第二个是一段文本，第三个是带有标题的图像。我通过添加 display: flex 将 flex 容器 .aside 设置为 flex 容器，并希望这些元素默认均匀显示。但是元素符号列表非常窄并且延伸到 flex 容器的左侧，中间的文本非常宽，图像及其标题大约在右边。我知道我遗漏了一些简单的东西——我需要应用哪些设置才能均匀分布它们。

我已经尝试在 flex 容器上使用 justify-content 并且它没有任何影响。这是 html

.container2 {
  width: 80%;
  max-width: 1150px;
  margin: 0 auto;
}

.aside {
  display: flex;
  justify-content: center;
}

.aside-image {
  width: 100%;
  margin-top: 1em;
}

figure {
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
}

.aside-left,
.aside-center {
  margin-right: 1em;
}

<div class="container2">
  <div class="aside">
    <aside class="aside-left">
      <h3>Top 5 articles</h3>
      <ul>
        <li><a class="hover-a" href="articles/article.html">Climate march</a></li>
        <li><a class="hover-a" href="articles/article.html">Walthamstow mattresses</a></li>
        <li><a class="hover-a" href="articles/article-dog-track.html">Plight of the dog track</a></li>
        <li><a class="hover-a" href="articles/article.html">The old cinema</a></li>
        <li><a class="hover-a" href="articles/article.html">Bus route changes</a></li>
      </ul>
    </aside>
    <aside class="aside-center">
      <h3>Comment</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </aside>
    <aside class="aside-right">
      <figure>
        <img class="aside-image" src="images/grayson-perry.jpg">
        <figcaption>I've moved out just as Walthamstow is becoming gentrified. My work is done.</figcaption>
      </figure>
      <cite>- Graysen Perry</cite>
    </aside>
  </div>
  <!-- aside-->
</div>
<!-- container-->

我希望 flex 元素能够均匀分布，而不是有一个宽的中央框和较小的外部框。我还希望 flex 元素留在容器内。

Answer 1

试试这个

.aside aside{
   width: 100%:
}

加上

figure{
  margin: 0;
}

ul{
   padding-left: 16px;
}