Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Grid layout - is this possible using flexbox?

I'm currently using the following grid-layout:

display: -ms-grid;
-ms-grid-columns: 400px 100px max-content 1fr 50px;
-ms-grid-rows: 1fr 1fr; 

Which resembles this layout:

| <----------------- this has a fixed width --------------------------> |

+----------+----------+-------------------+-----------------+-----------+
|<- fix -> |<- fix -> | <--- growing ---> | <- shrinking -> | <- fix -> |
+----------+----------+-------------------+-----------------+-----------+
|          |          | max-width content |                 |           |
+----------+----------+-------------------+-----------------+-----------+

Now, to be a bit more browser-supportig I could either use a polyfill or switch to flexbox layout (which is supported in most modern browsers). Is the above layout possible to do using flexbox?

like image 423
Nils Avatar asked Feb 07 '14 09:02

Nils


1 Answers

To make this short:
It is imposible to create a layout based on the flexbox layout-model which has more than one row and equal-sized "columns" if one or more of the cells have a dynaic width.

like image 142
Nils Avatar answered Nov 01 '22 10:11

Nils