CSS Flexbox spacing with stacking

Question

Suppose, I have 3 divs A, B and C inside a div which is a flex.

[ABC....]

I want to distribute remaining space only between B and C i.e. I want to achieve this

[AB....C]

Is there some property that helps me specify to distribute space between B and C, or in other words make B stack with A?

Note: I want to do this without any div nesting.

Thank you.

score 0 · Answer 1 · answered Feb 11 '18 at 10:59

0

Add an empty element with a high flex-grow value. This will consume the available space.

#list {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  border: 1px dotted currentColor;
  padding: 8px;
}
.spacer {
  flex-grow: 100;
}

<ul id="list">
  <li>A</li>
  <li>B</li>
  <li class="spacer"></li>
  <li>C</li>
</ul>

answered Feb 11 '18 at 10:59

Niet the Dark Absol

311,322
76
447
566

Will making flex-grow too high slow rendering? – uttamkhanal Feb 11 '18 at 11:03
No, it's just a weighting system. Just a value of `1` will work here since the others have value `0`. – Niet the Dark Absol Feb 11 '18 at 11:04
Good solution but I am striving for readability without any dummy elements. I'd need to write media queries for the dummy element as well(if I need to for changing layout). – uttamkhanal Feb 11 '18 at 11:07

Temani Afif · Accepted Answer · 2018-02-11T11:14:38.220

0

Simply use margin and auto value like this with no need to add extra markup:

#list {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  border: 1px solid;
  padding: 8px;
}
li:last-child {
  margin-left:auto;
}

<ul id="list">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

edited Feb 11 '18 at 11:14

answered Feb 11 '18 at 11:03

Temani Afif

211,628
17
234
311

This one is good. Can you explain how auto works here. – uttamkhanal Feb 11 '18 at 11:08
here is the official spec that you can read https://www.w3.org/TR/css-flexbox-1/#auto-margins ;) – Temani Afif Feb 11 '18 at 11:10
@nitrogen also check the duplicate links above – Temani Afif Feb 11 '18 at 11:10

CSS Flexbox spacing with stacking

2 Answers2