Menu
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.
378
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.
To set space between the flexbox you can use the flexbox property justify-content you can also visit all the property in that link. We can use the justify-content property of a flex container to set space between the flexbox.
If the flex container has the clearfix method applied to it, then the flexbox justify-content rule won't work. If you use justify-content: space-between; then you will get incorrect spacing. With the space-between setting, the outside boxes should have no space between the box and the container edge.
If you are using flexbox and want the content to wrap, you must specify flex-wrap: wrap . By default flex items don't wrap. To have the images be three-across, you should specify flex-basis: 33.33333% .
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.
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
