Question

我有一个简单的flex容器，其中包含三个flex项目。一个是项目符号列表，第二个是一段文本，第三个是带有标题的图像。我通过添加.aside将flex容器display: flex设置为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-->

我希望弹性物料能够均匀分布，而不是具有宽的中央箱和较小的外部箱。我还希望伸缩项目保留在容器中。

Answer 1

尝试一下

.aside aside{
   width: 100%:
}

加

figure{
  margin: 0;
}

ul{
   padding-left: 16px;
}

文本列在flex容器中未均匀对齐

1 个答案: