0

I have a simple flex container with three flex items in. One is a bulleted list, the second is a piece of text and the third is an image with a caption. I have set the flex container .aside as the flex container by adding display: flex and was hoping that the items would display evenly as default. But the bulleted list is very narrow and extends over the left hand side of the flex container, the middle piece of text is very wide, and the image and its caption is about right. I know I'm missing something simple - what settings do I need to apply to distribute them evenly.

I've tried using justify-content on the flex container and it didn't have any affect. Here's the 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-->

I would expect the flex items to distribute evenly, instead of having a wide central box and smaller outside boxes. I would also expect the flex items to stay within the container.

Sajjan Singh
  • 2,523
  • 2
  • 27
  • 34
kateaubon
  • 31
  • 3
  • Just try to give ``flex-basis: 33.33%;`` to your ``aside`` – Awsme Sandy Oct 22 '19 at 12:09
  • Possible duplicate of [How can I show three columns per row?](https://stackoverflow.com/questions/24197007/how-can-i-show-three-columns-per-row) – Egor Oct 22 '19 at 12:31
  • Thanks - i added the flex-basis property to the aside-left, aside-center and aside-right classes and it was fixed. – kateaubon Oct 22 '19 at 12:41

1 Answers1

0

Try this

.aside aside{
   width: 100%:
}

plus

figure{
  margin: 0;
}

ul{
   padding-left: 16px;
}
Awais
  • 4,752
  • 4
  • 17
  • 40
  • i'm unsure why you added the figure margin and the ul padding @awais – kateaubon Oct 23 '19 at 10:23
  • @kateaubon because when you inspect you see there is `margin` and `padding` on these `tags` which shows div unequal. If element has no inner `margin` `padding` then its looks exactly same as its parent is. And also when child of `flex` items width set to `100%` then they equally distributed their `width`. – Awais Oct 23 '19 at 10:31
  • @kateaubon No problem. Did my answer solve your quire? – Awais Oct 24 '19 at 05:17