CODEWITHSUNDEEP
cssflexbox
ssbb
ssbb

Reputation: 1931

align flex with specific item in center

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

Upvotes: 1

Views: 1952

Answers (1)

Paulie_D
Paulie_D

Reputation: 115046

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>

Upvotes: 4

Related Questions