I'm struggling to achieve a simple layout using flexbox, and I can't figure out how to do it.
My objective is to have 3 divs aligned in a row, with the middle div (containing "short") centered. A visual representation would make it clearer:
The divs are currently centered but not in the way I want. I want the "short div" to be centered with the other divs around it. Is there a CSS rule that I overlooked for this?
Here's my current code and Jsfiddle link:
<div class="box">
<div class="A">whatever</div>
<div class="B">short</div>
<div class="C"> a long piece of content here </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;
}
Thank you