Setting a max-width for flex items?

Question

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.

I think it would be better not to speak about "floating" elements unless you actually mean setting property `float` to some non-default value. It appears that this question was about alignment or justification instead. — Mikko Rantalainen, Nov 23 '22 at 12:05
also see Mozilla docs: [using auto margins for main axis alignment](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#using_auto_margins_for_main_axis_alignment) — djvg, May 09 '23 at 07:12

Johannes · Accepted Answer · 2017-12-08T15:20:47.490

19

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>

edited Dec 08 '17 at 15:20

answered Dec 08 '17 at 14:02

Johannes

64,305
18
73
130

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

score 3 · Answer 2 · answered Mar 14 '21 at 07:31

3

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

margin-right: auto;

answered Mar 14 '21 at 07:31

Masih Jahangiri

9,489
3
45
51

1

easiest solution , atleast for me. thanks – Speedy11 Feb 17 '23 at 14:38

score 0 · Answer 3 · answered Dec 08 '17 at 14:25

0

You could use:

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

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

answered Dec 08 '17 at 14:25

icj90

42
3

This is a bad solution considering there can be change on the items later on. Placing items with margin always leads to disorders. – burakarslan Dec 02 '22 at 07:18

Setting a max-width for flex items?

3 Answers3