26

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 Item

I'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:

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

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

I also made a Fiddle for you all to play around.

wviana
  • 1,365
  • 1
  • 18
  • 38
knocked loose
  • 3,012
  • 2
  • 21
  • 43

4 Answers4

15

I would apply a width or min-width to the .child items (or left/right padding that creates the distance between them) and margin-left: auto to the last item, which moves it right, independently from the others:

https://jsfiddle.net/6vwny6bz/2/

.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 {
  list-style: none;
  min-width: 80px;
  padding: 10px 0;
}

.non-flex {
  margin-left: auto;
  padding: 10px 0;
}
<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>
Johannes
  • 59,058
  • 16
  • 59
  • 114
  • Took a little tweaking but this works perfectly, thanks for the help! – knocked loose Dec 08 '17 at 15:15
  • You are welcome! BTW: There is no need for all the flex settings in `.child`, so I erased them from the snippet above. They are flex *items* automatically (by defining their container as a flex container) – Johannes Dec 08 '17 at 15:21
  • Yeah, those come from our global styleguide, so I can't really remove them, but appreciate the insight. I've never really worked with flex-items until we started this project so they're kind of confusing! – knocked loose Dec 08 '17 at 15:23
2

A simple solution is to set margin-right: auto:

margin-right: auto;
Masih Jahangiri
  • 6,571
  • 2
  • 35
  • 36
0

Adding a flex span between your list objects helps a lot. https://jsfiddle.net/cd9car5k/1/

So

<ul class="container">
  <li class="child">One</li>
  <li class="child">Three</li>
  <li class="child">Three</li>
  <span class="example-spacer"></span>
  <div class="non-flex">
   I'm not a flex item
  </div>
</ul>

where:

.example-spacer {
    flex: 1 1 auto;
  }
mahval
  • 1,963
  • 1
  • 16
  • 24
0

You could use:

.non-flex{
  margin-left: 50%;
}

to create more space in between the first 3 elements and the non-flex one

icj90
  • 26
  • 3