Comments 6
Флексбокс становится способным очень на многое, если он многоуровневый (flex-direction=«row» вкладывается в flex-direction=«column» и наоборот). Более того, это позволяет описывать правильные взаимоотношения элементов интерфейса, а не лепить всё что можно в один уровень укладки.
+3
Ну у MSIE 11 всё же есть display: -ms-grid и прочие -ms-grid-* свойства, с помощью которых можно хотя бы упрощённый, но не совсем ужасный аналог полноценного grid получить. Если поддерживать версии ниже 11 не надо (а 11 таки надо) — то это проще, чем писать для IE полностью другую версию всего layout'а на flexbox.
0
Да? Покажите пример.
0
Ну собственный пример у меня будет непоказательным, т.к. я это использовал только чтобы подружить с IE11 основанный на Grid сторонний элемент для Wordpress. Да и grid'ы там довольно простые.
Вдохновение черпал (из того, что смог вспомнить) тут и тут. Но и других мануалов немало гуглится.
Вот такие куски кода, к примеру, в Wordpress'овский custom.css добавились, но это только костыли для IE, нормальная реализация Grid в CSS-файле плагина:
Это самый простой случай, табличка «текст с картинкой», где картинка может быть либо справа, либо слева от текста.
.block-ltr, .block-rtl {
/* MSIE 11 */
display: -ms-grid;
-ms-grid-rows: 1fr;
-ms-grid-row-align: start;
-ms-grid-column-align: end;
}
.block-ltr {
/* MSIE 11 */
-ms-grid-columns: 1fr 2fr;
}
.block-rtl {
/* MSIE 11 */
-ms-grid-columns: 2fr 1fr;
}
.block-ltr > figure {
/* MSIE 11 */
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.block-rtl > figure {
/* MSIE 11 */
-ms-grid-row: 1;
-ms-grid-column: 2;
}
.block-ltr > div {
/* MSIE 11 */
-ms-grid-row: 1;
-ms-grid-column: 2;
}
.block-rtl > div {
/* MSIE 11 */
-ms-grid-row: 1;
-ms-grid-column: 1;
}
Вдохновение черпал (из того, что смог вспомнить) тут и тут. Но и других мануалов немало гуглится.
+1
надо напомнить что grid'ы отвратно работают с анимацией
0
Sign up to leave a comment.
Grid или Flexbox?