CODEWITHSUNDEEP
htmlcssflexbox
jorswag3
jorswag3

Reputation: 23

Aligning two rows of flex items into columns

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>

Upvotes: 1

Views: 49

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 370993

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>

Upvotes: 2

abeyaz
abeyaz

Reputation: 3164

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;
}

Upvotes: 1

Related Questions