Я недавно обнаружил, Flexbox
когда искал решение, чтобы сделать div одинаковой высоты, в зависимости от самого высокого.
Я прочитал следующую страницу на CSS-tricks.com, и она убедила меня, что flexbox
это очень мощный модуль для изучения и использования. Тем не менее, это также заставило меня задуматься о том, что Twitter Bootstrap (и аналогичные фреймворки) предлагают такие же функции (+ конечно, намного больше) с их сеточными системами.
Теперь вопросы: каковы плюсы и минусы flexbox
? Есть ли что-то, что нельзя сделать с Flexbox, что можно сделать с помощью фреймворка, такого как Bootstrap (конечно, просто говоря о сеточной системе)? Какой из них быстрее, когда реализован на сайте?
Я догадываюсь, что только для грид-системы разумнее просто использовать flexbox
, но что, если вы уже используете фреймворк, есть что-то, что flexbox
можно добавить?
Есть ли какие-то причины выбирать flexbox
«сеточную систему» над рамочной?
источник
Ответы:
По нескольким причинам flexbox намного лучше, чем начальная загрузка:
Bootstrap использует плавающие элементы для создания системы сетки, которая, как многие говорят, не предназначена для сети, где flex-box делает противоположное, оставаясь гибким в отношении размера и содержимого элементов; та же разница, что и при использовании пикселей по сравнению с em / rem, или при управлении вашими делениями только с помощью полей и отступов, и никогда не устанавливая заранее заданный размер.
Bootstrap, поскольку он использует float, нуждается в clearfix после каждой строки, иначе вы получите смещенные div различной высоты. Flex-box этого не делает и вместо этого проверяет самый высокий div в контейнере и придерживается его высоты.
Единственная причина, по которой я бы пошел с начальной загрузкой поверх flex-box, - это отсутствие поддержки браузера (в основном IE) (уже умер). И иногда вы получаете различное поведение от Chrome и Safari, хотя оба используют один и тот же движок webkit.
Редактировать:
Кстати, если единственная проблема, с которой вы сталкиваетесь, - это столбцы одинаковой высоты, то для этого есть немало решений:
Вы можете использовать
display: table
на родителя, аdisplay: table-cell;
на ребенка. См. Как получить одинаковую высоту на дисплее: table-cellВы можете использовать абсолютное позиционирование на каждом div:
position: absolute; top: 0; bottom: 0;
Изменить 2:
Также проверьте http://chriswrightdesign.com/experiment/flexbox-adventures/ & https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties о том, как работает flex-box.
Изменить 3: https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox
Изменить 4: https://caniuse.com/#feat=flexbox
источник
flexbox
), поэтому, на мой взгляд, это безопасно для использования. Каково ваше мнение об использовании комбинации фреймворка иflexbox
? Конечно, не обращая внимания на сеточную систему фреймворка.Я не использую Flexbox (я читал об этом и, кажется, это здорово), но я разработчик внешнего интерфейса Bootstrap. Я предлагаю вам протестировать печать страниц Flexbox, прежде чем принимать окончательное решение. Знаете ... Иногда стили печати - ужасная головная боль, и Bootstrap мне очень помогает, когда мне приходится создавать форматы печати.
источник
Боюсь, вы пропустили еще одну статью о хитростях CSS :
Это не значит, что вы можете не пытаться, а просто подумать дважды. И все зависит от желаемой поддержки браузера в конце концов.
источник