Aligning two rows of flex items into columns

Question

I have a flex div as you can see below, but the buttons don't align with the boxes below.

How can I make them align with each other (the top to the bottom) while still having the flex?

Any ideas help. Thanks!

 .flex { display: flex; } .flex-child { flex: 1 1 auto; margin-right: 5px; } .boxed-flex { flex: 1 1 auto; margin-right: 5px; border: 4px solid green; } 

 <div class="flex"> <button class="flex-child" onclick="circumfrance()">Circumfrance</button> <button class="flex-child" onclick="area()">Area</button> <button class="flex-child" onclick="diameter()">Radius &rarr; Diameter</button> <button class="flex-child" onclick="radius()">Diameter &rarr; Radius</button> </div> <div class="flex"> <div class="boxed-flex"> <strong><p id="circumfrance"style="color:purple;"></p></strong> </div> <div class="boxed-flex"> <strong><p id="area"style="color:purple;"></p></strong> </div> <div class="boxed-flex"> <strong><p id="diameter"style="color:purple;" ></p></strong> </div> <div class="boxed-flex"> <strong><p id="radius" style="color:purple;"></p></strong> </div> </div> 

Answer 1

You are sizing the flex items with flex: 1 1 auto . This is shorthand for:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: auto

The problem is the last component.

With flex-basis: auto you're sizing the items based on their width. But the widths of the button and the green boxes are different. Hence, the columns don't align.

Instead, use flex: 1 1 0 (which is the same as flex: 1 ).

This sets the flex-basis to 0. Now the items will simply distribute free space in the container evenly among themselves.

 .flex { display: flex; } .flex-child { flex: 1; margin-right: 5px; } .boxed-flex { flex: 1; margin-right: 5px; border: 4px solid green; } 

 <div class="flex"> <button class="flex-child" onclick="circumfrance()">Circumfrance</button> <button class="flex-child" onclick="area()">Area</button> <button class="flex-child" onclick="diameter()">Radius &rarr; Diameter</button> <button class="flex-child" onclick="radius()">Diameter &rarr; Radius</button> </div> <div class="flex"> <div class="boxed-flex"> <strong><p id="circumfrance"style="color:purple;"></p></strong> </div> <div class="boxed-flex"> <strong><p id="area"style="color:purple;"></p></strong> </div> <div class="boxed-flex"> <strong><p id="diameter"style="color:purple;" ></p></strong> </div> <div class="boxed-flex"> <strong><p id="radius" style="color:purple;"></p></strong> </div> </div> 

Answer 2

Just add width:0 to your button class, and it will work. Because, buttons have default auto-sized widths. This way it will prevent auto sizing.

.flex-child {
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex:  1 1 auto;
    -webkit-flex:  1 1 auto;
    -ms-flex:  1 1 auto;
    flex:  1 1 auto;
    margin-right:5px;
    width: 0px;
}