I'm trying to create a filter section on my site, the content is all generated dynamically (so I can't add extra parents to it), and our styleguide creates them using flex items. I'd like to keep this functionality for the most part.
I want my 3 flex items to have a max-width and be floated left, leaving my non flex item floated right, in the overall container that is set to a max width of 1080px sort of like this:
Option 1 Option 2 Option 3 Non-flex ItemI've tried setting the flex-align values and following this answer, but that doesn't seem to work for this.
As of right now, this is the code that I am working with:
.container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; max-width: 1080px; margin: 0 auto; padding: 0 20px; box-sizing: content-box;}.child { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative;}<ul class="container"><li class="child">One</li><li class="child">Three</li><li class="child">Three</li><div class="non-flex"> I'm not a flex item</div></ul>I also made a Fiddle for you all to play around.