37

I am trying to implement flexbox but can't get it to work. What am I missing? I have all the flexbox vendor prefixes in place.

.main-navigation ul { 
   width:100%; 
   display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
   display: -ms-flexbox;  /* TWEENER - IE 10 */
   display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
   display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  }

.main-navigation ul li {
   justify-content:space-between; 
   width:100px; 
   background:#666; 
   display:block;
 }

The goal is to get the left most li to go flush with the left of the ul's container and the right most li to go flush with the right-hand side of the ul's container. Any help welcome.

2
  • can you create a demo?
    – G.L.P
    Oct 8, 2015 at 8:25
  • 1
    Are you sure you're not missing the vendor prefixes on the space-between rule @alySebastien?
    – Liam
    Oct 8, 2015 at 15:19

3 Answers 3

63

One more thing to keep in mind, additional to the need of adding justify-content:space-between to the flex container and not to the elements themselves; Make sure that you don't have empty elements (like an empty div or :after) inside the container.

In my case turned out a JS adding an empty div as a "clearfix" from the days before flex, when things were done floating elements.

justify-content:space-between will justify for all the elements inside the container even those with no content, which can mess up the alignment and wrapping.

0
31

The problem is you should set justify-content: space-between; on element with display: flex property or better say on 'parent', so 'child' elements will be aligned with space between each other.

.main-navigation ul { 
  width: 100%; 
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.main-navigation ul li {
  width: 100px; 
  background: #666; 
  display: block;
}
1
  • Thank you. Looks like I was missing the vendor prefixes on the space-between rule. :)
    – Al-76
    Oct 8, 2015 at 9:07
16

Flex properties are divided among two categories: The flex container and the flex items.

Some properties apply only to the container, other properties apply only to the items.

The justify-content property applies only to a flex container.

In your code, justify-content is applied to the items, so it's having no effect.

Re-assign it to the container.

Of course, an element can be both a flex container and item, in which case all properties apply. But that's not the case here. The li elements are solely flex items and will ignore container properties.

For a list of flex properties – divided by container and items – see: A Complete Guide to Flexbox

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.