Make one item of a flexbox half or a quarter size of other items

Question

If I have 3 items in a flex box all set to flex: 1 how would I make one of them 1/2 to 1/4th the size of the others?

.div {
   display: flex; 
   flex-direction: row;
}

div > * {
   background-color: lightblue;
   padding: 4px;
   flex: 1;
   border: 1px solid gray;
}

.smaller {
   flex: .5 1 auto;
}

<div class="div">
  <div>1</div>
  <div>2</div>
  <div class="smaller">3</div>
</div>

This seems to work here but it's not working in my project.

Is there a simpler example? Setting flex to anything other than "1" doesn't seem to work. I've read 5 articles on this and I don't know how those flex values work.

if it works here and not in your project than the problem is in your project not it the snippet — dippas, May 09 '20 at 22:02
OK we are getting something, `flex: .5 1 0` works it seems. But what does it all mean Basil? — 1.21 gigawatts, May 09 '20 at 22:03
flex-basis need to be 0 so the content isn't considered when splitting the free space (like all the element will start at 0 width) — Temani Afif, May 09 '20 at 22:05
@dippas there was some other issues going on with the project, `.5 1 auto` works but `.5 1 0` is what I think I need. — 1.21 gigawatts, May 09 '20 at 22:10
the figure in the duplicate is all what you need to understand your error — Temani Afif, May 09 '20 at 22:14

score 1 · Accepted Answer · answered May 09 '20 at 22:05

1

Trying flex: .5 1 0 should work. That should size it the way you want.

answered May 09 '20 at 22:05

IPSDSILVA

1,667
9
27

Make one item of a flexbox half or a quarter size of other items

1 Answers1