1

I try to achieve a basic thing with flexbox and I don't know how to do this.

My goal is to have 3 div align in a row, and the middle div (here contening "short") must be centered. As a picture will be more explicit :

enter image description here

those div are centered but not as i would like. I wanted the "short div" to be centered, and other around. Is there a CSS rule I missed for this?

My code so far and Jsfiddle : 

<div class="box">
   <div class="A">whatever</div>
   <div class="B">short</div>
   <div class="C"> a f*cking very very very very very long content</div>
</div>

CSS

.box{
display:flex;
flex-flox:row nowrap;
justify-content:center;
align-content:center;
align-items:center;
background-color:red;
}

.A{
border:medium solid black;
}
.B{
border:medium solid black;
}
.C{
border:medium solid black;
}

https://jsfiddle.net/js7hboek/

Thank

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
ssbb
  • 1,921
  • 2
  • 21
  • 42
  • ok. thank for answer, I was unconfortable with this kind of centering to. but I really hope it exist :s. – ssbb Mar 30 '16 at 14:32
  • 1
    Here are some flex centering techniques you may find useful. In particular, refer to boxes 71-73. http://stackoverflow.com/a/33856609/3597276 – Michael Benjamin Mar 30 '16 at 17:21

1 Answers1

4

This is not possible with pure flexbox...that's not the way centering works. You will need positioning...which sort of obviates the point of flexbox

However, if you can change the structure, flexbox can help

* {
  box-sizing: border-box;
}
.box {
  display: flex;
}
.wrapped {
  flex: 1;
  border: 1px solid grey;
}
.A {
  text-align: right;
}
<div class="box">
  <div class="wrapped">
    <div class="A">whatever</div>
  </div>
  <div class="B">short</div>
  <div class="wrapped">
    <div class="C">a very very very very very long content</div>
  </div>
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • 1
    at least, it's a working solution, just feel sad flexbox can't do it by itself. ty – ssbb Mar 30 '16 at 14:39
  • Flexbox basically works by manipulating margins and with other elements on the same row `margin:auto` won't work properly. CSS Grids offer a solution by they are a **long** way off. – Paulie_D Mar 30 '16 at 14:41