CODEWITHSUNDEEP
htmlcssflexbox
Standard
Standard

Reputation: 1512

justify-content has no effect to a flex container

Okay so this is my HTML part:

<ul id="history">
  <li class="historyYear"><span class="rotateYear">1962</span> <div class="trophy"></div><div class="trophy"></div> </li>
  <li class="historyYear"><span class="rotateYear">1960</span> <div class="trophy"></div> </li>
</ul>

and there is my css code:

.historyYear {
    height:70px;
    margin-bottom:10px;
    display:flex;
    justify-content:flex-start;
    flex-wrap: nowrap;
}

.rotateYear {
    -webkit-transform: rotate(-90deg);
    height: 43px;
    margin-top: 13px;
    margin-left: -2px;
    font-size: 30px;
    padding: 0px 6px;
}

.trophy {
    width:50px;
    max-width:50px;
    height:50px;
    background:grey; 
}

The output should be like left-aligned; but I got big blanks between the centered trophies. There is also a live demo online.

The 2 grey boxes should be on the left on their line. How do I align them to the left side?

Upvotes: 0

Views: 539

Answers (1)

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

You had margin:auto change it to margin: 5px;.

Try this:

#mainContent .frames div {
  margin: 5px;
}

I just checked if you add above code it will effect other view. So try this new css it will target those trophy which are in #historyTab

#historyTab #mainContent .frames div {
      margin: 5px;
    }

Upvotes: 1

Related Questions