Add basic flexbox implementation of grid for IE #2943
Conversation
bartaz
changed the title
| // flexbox approximation of grid column styles for IE | ||
| // this needs to be a @mixin rather than %placeholder because it's ised inside @media queries | ||
| @mixin vf-grid-flex-column { | ||
| flex-basis: 0; |
There was a problem hiding this comment.
why not shorthand flex: 1 1 0;?
There was a problem hiding this comment.
I don't like to guess what number does what ;)
|
@bartaz just realised that columns do not respect the column classes, just get equal widths; but if you give them flex-grow consistent with the number of columns, it does:
|
|
@lyubomir-popov ah, good catch. I used to have % based widths that kinda worked, but removed them. Didn't notice the column width change. But good point about using grow for that, it will be simple enough workaround. |
|
@bartaz it is not 100% accurate, but close enough. You can see the blue vertical line doesn't coincide with theedge of the 11th 1-col div at the 4-th-to-last row. I guess that's because of the static margin. Either way, completely acceptable in my opinion given this is a fallback. |
| // flexbox approximation of grid column styles for IE | ||
| // this needs to be a @mixin rather than %placeholder because it's ised inside @media queries | ||
| @mixin vf-grid-flex-column { | ||
| flex-basis: 0; |
lyubomir-popov
added
Review: Code +1
Review: Design +1
and removed
Review: Code needed
Review: Design needed
Review: QA needed
labels
Done
Adds basic fallback implementation of grid for IE11 using flexbox.
For large screens (12 column grid) simplified flexbox based grid should be applied in IE11.
For smaller screens columns just render one under another.
Fixes #2685
QA
You can use ignore whitespace mode on GitHub when reviewing the code to avoid confusing diff where stuff got nested into
@supports../run