CODEWITHSUNDEEP
cssflexbox
Al-76
Al-76

Reputation: 1878

Why is justify-content: space-between not working?

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.

Upvotes: 42

Views: 90563

Answers (3)

ccrez
ccrez

Reputation: 872

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.

Upvotes: 69

Michael Benjamin
Michael Benjamin

Reputation: 371689

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

Upvotes: 16

Rakhat
Rakhat

Reputation: 4942

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;
}

Upvotes: 33

Related Questions