justify-content property is not working as expected

Question

I'm trying to align "Previous" to the left, align "Next" to the right, and figure out how to center the page numbers.

I've been looking at tutorials and articles on flexbox but I'm having a hard time understanding it.

.nav-links {
  display: flex;
}
.prev.page-numbers {
  justify-content: flex-start;
}
.next.page-numbers {
  justify-content: flex-end;
}

<div class="nav-links">
  <a class="prev page-numbers">Previous</a>
  <a class="page-numbers">1</a>
  <a class="page-numbers">2</a>
  <a class="page-numbers">3</a>
  <a class="next page-numbers">Next</a>
</div>

Oriol · Answer 1 · 2016-06-01T23:23:55.033

2

It seems you want to "push" flex items in one direction or another. To do that, you should use auto margins instead of justify-content.

.nav-links {
  display: flex;
}
.prev.page-numbers {
  margin-right: auto; /* Push to the left */
}
.next.page-numbers {
  margin-left: auto; /* Push to the right */
}

<div class="nav-links">
  <a class="prev page-numbers">Previous</a>
  <a class="page-numbers">1</a>
  <a class="page-numbers">2</a>
  <a class="page-numbers">3</a>
  <a class="next page-numbers">Next</a>
</div>

The remaining flex items will be centered between the first and last ones, not necessarily centered relatively to the container. If you want the latter, you can make the first and last flex items be equally wide.

.nav-links {
  display: flex;
}
.prev.page-numbers, .next.page-numbers {
  flex: 1; /* Disttribute remaining space equally */
}
.next.page-numbers {
  text-align: right;
}

<div class="nav-links">
  <a class="prev page-numbers">Previous</a>
  <a class="page-numbers">1</a>
  <a class="page-numbers">2</a>
  <a class="page-numbers">3</a>
  <a class="next page-numbers">Next</a>
</div>

edited Jun 01 '16 at 23:23

answered Jun 01 '16 at 23:15

Oriol

274,082
63
437
513

always forget the auto `margins` in `flexbox` ;) – dippas Jun 01 '16 at 23:20
@dippas They usually come in handy. Much more powerful than in block layout. – Oriol Jun 01 '16 at 23:26
I'll remember in the future :) – dippas Jun 01 '16 at 23:27
@Oriol how are they not confined to the widths of each other? Like your example goes 100% width, but my container doesn't have a set width. I was hoping that making it flex would push it all the way to the left/right of the parent container. – Darren Bachan Jun 01 '16 at 23:35
@Oriol Yeah, I can only get this to work if I define a width to the parent container, so in this case .nav-links. – Darren Bachan Jun 01 '16 at 23:48
@DarrenBachan `display: flex` creates a block-level box, which by default is as wide as its containing block. – Oriol Jun 02 '16 at 00:17

score 1 · Accepted Answer · edited May 23 '17 at 12:31

1

The justify-content property applies only to flex containers, although it aligns flex items.

In your code, because you're applying justify-content to flex items, it is being ignored.

Here are two working examples:

Example 1 - `justify-content`

.nav-links {
  display: flex;
  justify-content: space-between;
  background-color: lightgray;
}

a {
  flex: 0 0 10%;
  text-align: center;
  border: 1px solid black;
  background-color: yellow;
}

<div class="nav-links">
  <a class="prev page-numbers">Previous</a>
  <a class=" page-numbers">1</a>
  <a class="page-numbers">2</a>
  <a class=" page-numbers">3</a>
  <a class="next page-numbers">Next</a>
</div>

Example 2 - `auto` margins

.nav-links {
  display: flex;
  background-color: lightgray;
}

a {
  flex: 0 0 10%;
  text-align: center;
  border: 1px solid black;
  background-color: yellow;
}    

a:first-child { margin-right: auto; }
a:last-child  { margin-left: auto; }

<div class="nav-links">
  <a class="prev page-numbers">Previous</a>
  <a class=" page-numbers">1</a>
  <a class="page-numbers">2</a>
  <a class=" page-numbers">3</a>
  <a class="next page-numbers">Next</a>
</div>

More details:

Methods for Aligning Flex Items along the Main Axis

edited May 23 '17 at 12:31

Community

1
1

answered Jun 01 '16 at 23:07

Michael Benjamin

346,931
104
581
701

Great link. I'm trying to do .box36, that's exactly what I want, but I cannot replicate this. I'm putting the justify on nav-links and the flex on the tags and it does nothing. – Darren Bachan Jun 01 '16 at 23:31
In `.box36` there is no `justify-content` property in use. It's solely `auto` margins. I've updated my answer with an example. – Michael Benjamin Jun 01 '16 at 23:38
Also note that in the linked answer all the code is available above each illustration and in the demo at the bottom ("Playground"). – Michael Benjamin Jun 01 '16 at 23:40
For me to get this to work, I need to apply width:100%; to nav-links. Currently it's grabbing the collective width of each element, which for me, factoring the padding I have on each , approx 300px. So it's not "pushing" it'self to one end, well it is, but there's no space in between to see it, unless I set a defined width. – Darren Bachan Jun 01 '16 at 23:47
Post a fiddle with the problem, or a new question, because I believe all answers here resolved the main issue of your question above. – Michael Benjamin Jun 01 '16 at 23:49
It's because your primary nav container (`.pagination`) is a flex container. Change that to `display: block` and you won't need the `width: 100%`. Only the `.nav-links` needs `display: flex`. – Michael Benjamin Jun 01 '16 at 23:59
When you apply `display: flex` to an element, it automatically applies `justify-content: flex-start` to its children. That's why `nav-links` is collapsing without `width: 100%`. – Michael Benjamin Jun 02 '16 at 00:02
This worked. Thank you. I am not sure if I have to post a new question to ask this, but if I wanted to add space between the numbers, is padding/margin the right way to go? When spacing with flex I am always concerned about how to space the elements within. – Darren Bachan Jun 02 '16 at 00:03
You can use padding / margin, just make sure to [*not use percentages*](http://stackoverflow.com/a/36783414/3597276). Other than that, refer to my [other answer](http://stackoverflow.com/a/33856609/3597276), which contains many alignment options. – Michael Benjamin Jun 02 '16 at 00:06
If that's not enough, then yes, you should post another question. – Michael Benjamin Jun 02 '16 at 00:06

score 1 · Answer 3 · answered Jun 01 '16 at 23:15

1

justify-content only works in parents, not in children, so if you can wrap your .page-numbers then you just can simply set display:flex to parent and child div and flex:1 + justify-content to div child, which is parent of .page-numbers

div {
  display: flex;
}
div div {
  flex: 1;
  justify-content: center
}

<div class="nav-links">
  <a class="prev page-numbers">Previous</a>
  <div>
    <a class="page-numbers">1</a>
    <a class="page-numbers">2</a>
    <a class="page-numbers">3</a>
  </div>
  <a class="next page-numbers">Next</a>
</div>

answered Jun 01 '16 at 23:15

dippas

58,591
15
114
126

I wish I could wrap it, but I'm using wordpress to generate the pagination, and I don't posses the skills to figure out how to wrap their markup in the divs I want to better target them, but I appreciate your answer and I do understand it so next time, in a scenario where I can control how to write my divs, I will not make this mistake. – Darren Bachan Jun 01 '16 at 23:50
@DarrenBachan if you want I can update my answer to make it wrap it dynamically using jQuery – dippas Jun 01 '16 at 23:52
That seems like overkill, well only because after seeing how flexbox works I thought this would be a really good time to try to learn and implement some of it. Part of me is curious though, so you could add in divs through jQuery? I feel like the right way would be to modify the wp theme somehow. – Darren Bachan Jun 01 '16 at 23:56
yes you could add elements/classes with jQuery, but you're right you should look into your theme ;) – dippas Jun 02 '16 at 00:17

justify-content property is not working as expected

3 Answers3

Example 1 - justify-content

Example 2 - auto margins

Example 1 - `justify-content`

Example 2 - `auto` margins