-2

I'm out of ideas. Maybe anybody knows how to solve this?

  1. all divs must be equally spaced.
  2. div1, div2 unknown width;
  3. div2 must be in the center;
  4. div3 can be empty or not.

div div {
  background: pink;
  border: 1px solid #ccc;
}
<div style="display:flex;justify-content:space-between">
  <div class="d1">div1</div>
  <div class="d2">div2</div>
  <div class="d3"></div>
</div>

Problem:

div2 is not horizontally centered

Comment on accepted answer:

The only way i managed to solve it was:

div2 { width: 200px}
div1, div3 { width: calc((100% - 200px)/2) }
Tadas V.
  • 775
  • 1
  • 11
  • 22
  • 2
    If d3 is empty (which is now the case) and d2 would sit _exactly_ in the center, they would not be evenly spaced anymore..? Should there be space between the divs or might they take up all the space? – Corrl Oct 27 '21 at 18:44
  • 1
    What does "equally spaced" mean? Same width? Uniform gap between? – isherwood Oct 27 '21 at 18:50
  • @Corrl - if d3 is empty, d2 still must be in the center. That's where I'm having a problem. – Tadas V. Oct 27 '21 at 18:53
  • 2
    Not your down-voter, but no, it is not possible to see "somewhere" who downvoted. ***All*** votes, whether up or down, are anonymous, by design. – Hovercraft Full Of Eels Oct 27 '21 at 19:01

1 Answers1

0

just give all 3 boxes the same width of 33.33% ( calc(100% / 3) ):

.d1,
.d2,
.d3 {
  width: calc(100% / 3);
}


/* for demo purpose only */
.d1,
.d2,
.d3 {
  border: 2px solid red;
  box-sizing: border-box;
}
<div style="display:flex;justify-content:space-between"> 
  <div class="d1">div1</div>
  <div class="d2">div2</div>
  <div class="d3"></div>
</div>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
  • simply 100% for the width would work as well – Corrl Oct 27 '21 at 18:50
  • @Corrl in that case the 3 elements would overflow the viewport as 3x 100% = 300%. Which would cause a bad usability. – tacoshy Oct 27 '21 at 18:51
  • Did you try it in your snippet? – Corrl Oct 27 '21 at 18:53
  • @Corrl no but I know what it does. it will only work as long as the content is smaller in width. after that the size will be broken. – tacoshy Oct 27 '21 at 18:55
  • The requirements are that the first two columns are variable. This doesn't comply. – isherwood Oct 27 '21 at 18:56
  • @tacoshy - that's actually a good idea given my specific situation. – Tadas V. Oct 27 '21 at 18:58
  • @isherwood where do you see in the requirement that the width must be variable? it is just mentioned that the width is unknown btu all divs must have the same width. – tacoshy Oct 27 '21 at 18:58
  • Nope, in a flexbox element the divs will take up as much space as they can, fitting the parent element. I'd suggest that you try, since it's quite useful and easy without having to calculate. If two divs should have the same size, simply set both to 100%. If one should be twice as wide at the other, set one two 100%, the other to 200% – Corrl Oct 27 '21 at 18:59
  • I've left a comment above asking for clarification and haven't received any. I suspect that equal widths is not what's desired. – isherwood Oct 27 '21 at 19:01
  • @Corrl I know what you mean (with exception of inline-flex) However, just type in a long word. on smalls creens such the snipept, the columns will not eb equal anymore as the box wiwllr esize to fit content and adjust the other boxes smaller. By calculating the width you will remain the width and overflow instead. – tacoshy Oct 27 '21 at 19:04
  • @tacoshy overflow: hidden will help with that – Corrl Oct 27 '21 at 19:09
  • @Corrl it will help an `overflow` but not a resize. In the end you can calc it then which is shorter then to think about all other possibilities and use counter-measures. – tacoshy Oct 27 '21 at 19:11
  • @tacoshy setting a calculated with in a flexbox container won't prevent the children from growing. I suggest again you try it in the snippet – Corrl Oct 27 '21 at 19:25