Nesting flex box

Question

I find flex box really useful, and since I discovered it I am tempted to use it everywhere.

Question

Is it a good practice to nest flex-boxes? Does having a lot of them and especially nested ones has an impact on performance?

Answer 1

In short yes you will see dip in performance by around 10x we are still talking milliseconds here though.

So I would be wary of using a lot of them because one could change render speed from 10MS to 100MS a lot of them could in essence highly increase the render time.

Plus there is their comparability with browser's and their inability to play well with absolute positioning and block element's.

For now I would recommend using display:table and for the children display:table-cell & display:table-row.

here is an example of what I use:

.align-table {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.t-align {
  display: table-cell;
  vertical-align: top;
  width: 100%;
}