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.