-1

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.

Ukh
  • 145
  • 2
  • 10

2 Answers2

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>
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • Will making flex-grow too high slow rendering? – Ukh 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). – Ukh Feb 11 '18 at 11:07
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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415