Mike Vayvala Mike Vayvala - 2 months ago 10
CSS Question

Align divs vertically using flexbox

I'm trying to align three

div
blocks vertically using flexbox.

I can get them horizontally aligned correctly, however not vertically.

What am I doing wrong?



.banner {
padding-top: 10px;
padding-bottom: 10px;
background-color: #01b9d5;
color: white;
height: 55px;
}
.banner-align {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid green;
}
.banner-hero {
flex: 1;
align-self: center;
max-width: 50%;
border: 1px solid red;
text-align: center;
display: inline-block;
}
.banner-left {
align-self: flex-start;
flex: 1;
border: 1px solid green;
display: inline-block;
}
.banner-right {
align-self: flex-end;
flex: 1;
text-align: right;
border: 1px solid yellow;
display: inline-block;
}

<div class="banner">
<div class="container banner-align">
<div class="banner-left">
Left Block
</div>
<div class="banner-hero">
<b>Title</b>
</div>
<div class="banner-right">
Right block
</div>
</div>
</div>





Here is a fiddle: https://jsfiddle.net/zqc1qfk1/1/

Answer

Simply enable wrap on the container and give each flex item a width: 100%:

.banner-align {
  display: flex;
  flex-wrap: wrap;
}

.banner-align > * {
   flex: 0 0 100%;
 }

Now each flex item consumes all the space in the row, forcing other elements to create new rows.

revised fiddle