2

I am using Flexbox and I am trying to create something like this: enter image description here

I want the three "parent" boxes to be vertically aligned within the row. Each box have different height.

In the snippet (Codepen is better in this case as there was a character limit in Stack) I am trying to replicate the first box as a start, the boxes float to the top. They are not vertically aligned:

.box, .box-first, .box-large, .box-nested, .box-row {
    position: relative;
    box-sizing: border-box;
    min-height: 1rem;
    margin-bottom: 0;
    background: #007FFF;
    border: 1px solid #FFF;
    border-radius: 2px;
    overflow: hidden;
    text-align: center;
    color: #fff;
}

.box-nested {
    background: #036;
    border-color: #007FFF;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.css" rel="stylesheet"/>
<div class="row"> <div class="col-xs-12"> <div class="box box-container"> <div class="row"> <div class="col-xs-12"> <div class="box-first box-container"> <div class="row"> <div class="col-xs-2"> <div class="box-nested"> <img style="width:30px; height:auto;" src="https://cdn0.iconfinder.com/data/icons/simplicity/512/dollar-256.png"/> </div></div><div class="col-xs-5"> <div class="box-nested"> <div class="col-xs-12"> <div class="box-nested">111 222</div><div class="box-nested">105,306</div></div></div></div><div class="col-xs-5"> <div class="box-nested"> <div class="col-xs-12"> <div class="box-nested"> <div class="col-xs-12"> <div class="box-nested">111</div><div class="box-nested">222</div></div></div><div class="box-nested"> <div class="col-xs-12"> <div class="box-nested">105,306</div></div></div></div></div></div></div></div></div></div></div></div></div>

When I tried adding the for the display: flex; align-items: center; in the CSS it messes up with the nested divs: enter image description here

I am not that familiar with Flexbox and I have seen many different versions online that don't help.

Datacrawler
  • 2,780
  • 8
  • 46
  • 100
  • Do you need them to be of equal width and height as the image you have demonstrated? –  Dec 16 '17 at 14:09
  • 1
    It does work fine by just adding align-items:center to row and doesn't produce the output you demonstrated. –  Dec 16 '17 at 14:14
  • @Highdef That is what I saw in the first answer. I wrote the same thing and it did not change for a reason. It works in the snippet now. – Datacrawler Dec 16 '17 at 14:28

0 Answers0