CODEWITHSUNDEEP
htmlcssflexbox
Holly
Holly

Reputation: 7752

justify-content: space-between vs. flex-grow to align content

I have a top horizontal navigation which I'm using the css flexbox rule to control spacing.

enter image description here

I would like the the first item in the menu to be aligned to the left, the last item to be aligned to the right and for the spacing in between the rest of the items to be equal.

Is this possible? I thought justify-content: space-between; would have achieved this but I can't get it to work.

I put an example of what I'm trying to do on jsfiddle. I also put this code below too.

The only other way I can think of doing it is to give a text-align: center to each of the li elements but for the first and last, which I could give a text-align: left and text-align: right but this would give too much spacing between the second and second last elements.

.container{
  background-color: yellow;
  width: 1100px;
}
.container ul#nav {
  padding: 0;
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
}
.container ul#nav li {
  list-style: none;
  -webkit-flex: 2 1 auto;
  -ms-flex: 2 1 auto;
  flex: 2 1 auto;
  justify-content: space-between;
}
.container ul#nav li {
  justify-content: space-between;
}
<div class="container">
  <ul id="nav">
    <li><a href="#">Apples</a></li>
    <li><a href="#">Oranges</a></li>
    <li><a href="#">Pears</a></li>
    <li><a href="#">Kiwis</a></li>
  </ul>
</div>

Upvotes: 4

Views: 11641

Answers (4)

Musti
Musti

Reputation: 139

It is also important to note that margin is very important for all of this to work. If you tamper with the margin of elements justify-content: space-between; might also not work as flex-box seems to use the margin the justify the content.

Upvotes: 0

Juanma Menendez
Juanma Menendez

Reputation: 20199

The problem is that if even one element has a flex-grow > 0, automatically any value of justify-content ceases to have effect, and the positive extra space will be distributed among the items with flex-grow.

In conclution: "All flex-items must have flex-grow: 0; in order justify-content to work:.

In your specific case the problem is the line: flex: 2 1 auto; which automatically set flex-grow: 2;

In order to fix it just change the flex-grow to 0 with the code line flex: 0 1 auto;

Upvotes: 8

Anonymous
Anonymous

Reputation: 10216

You could achieve this by removing the flex: 2 1 auto; from .container ul#nav li like this:

.container{
  background-color: yellow;
  width: 1100px;
}
.container ul#nav {
  padding: 0;
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
}
.container ul#nav li {
  list-style: none;
  -webkit-flex: 2 1 auto;
  -ms-flex: 2 1 auto;
  justify-content: space-between;
}
.container ul#nav li {
  justify-content: space-between;
}
<div class="container">
  <ul id="nav">
    <li><a href="#">Apples</a></li>
    <li><a href="#">Oranges</a></li>
    <li><a href="#">Pears</a></li>
    <li><a href="#">Kiwis</a></li>
  </ul>
</div>

Upvotes: 5

Aru
Aru

Reputation: 1870

Try this:

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;

  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

Upvotes: 1

Related Questions