Using flex to make cells in a row the same height

[csdude55]

I have 3 cells in a row with variables for content, so the height can vary. I want them to all be the same height.

I'm doing this, but it's not working:

<style>
.flex {
 display: flex;
 align-items: center;
 justify-content: center
}

.flex p {
 width: 33%;
 padding: 10px;
 text-align: center;
 box-sizing: border-box;
 flex: 1
}
</style>

<div class="flex">
 <p>
  $foo
 </p>

 <p>
  $bar
 </p>

 <p>
  $str
 </p>
</div>

I'm testing with Chrome, so it's not a compatibility issue. What am I doing wrong?

[csdude55]

FWIW, changing it to display: table does work:

<style>
.flex {
 display: table /* removed the flex stuff */
}

.flex p {
 width: 33%;
 padding: 10px;
 text-align: center;
 box-sizing: border-box;
 display: table-cell
}

I'm not entirely clear what the advantage is to using flex, especially since <= IE10 doesn't recognize it.

[lammert]

Flex is more flexible as the name suggests :) You can swap elements around by adding an order index without changing the HTML. It is also possible to dynamically grow and shrink the flexbox with the flex-grow and flex-shrink properties. Much depends on how you like the visitors to interact with the table contents. If the content is fixed and determined by the server script then tables are fine. If you need visitor control over the contents, flexboxes are the way to go.

[not2easy]

The flex option is a set of tools created to work together. I am not sure you can use border-box sizing within flex elements and get it to do what you want. Flex uses 'wrap' or 'no-wrap' rather than floats, for example. The flex package includes things like 'space-around' and 'space-between' to do what margins and padding would do in border-box sizing.

[Fotiman]

You want:

.flex {
 display: flex;
 align-items: stretch;;
 justify-content: center
}

If you then want the content within each flex-item to be centered vertically, make each of the flex items a flex container as well, with align-items: center.

.flex p {
 width: 33%;
 padding: 10px;
 text-align: center;
 box-sizing: border-box;
 flex: 1;
 display: flex;
 align-items: center;
}

[Fotiman]

Also note, instead of using a selector of ".flex p" (which will select any p element descendant, even if it's not one of the flex-item children), you might use:

.flex > * {

Which will apply to an direct child of the flex container.