Flexbox vs Twitter Bootstrap (или аналогичная структура)

Недавно я обнаружил Flexbox, когда искал решение сделать divs одной и той же высотой, в зависимости от самого высокого.

Я прочитал следующую страницу на CSS-tricks.com, и он убедил меня, что Flexbox - очень мощный модуль для изучения и использования. Тем не менее, это также заставило меня задуматься о том, что Twitter Bootstrap (и аналогичные структуры) предлагают одни и те же функции (+, конечно, намного больше) с их сетчатыми системами.

Теперь вопросы: Каковы плюсы и минусы Flexbox? Есть ли что-то, что нельзя сделать с Flexbox, что можно сделать с помощью такой структуры, как Bootstrap (конечно, чисто говоря о сетке)? Какой из них быстрее при внедрении на веб-сайте?

Я предполагаю, что только для grid-системы он умнее для использования Flexbox, но что, если вы уже используете фреймворк, есть ли что-то Flexbox?

Есть ли какие-либо причины для выбора Flexbox "grid-системы" в рамках фреймворка?

Ответы

Ответ 1

По нескольким причинам flexbox намного лучше, чем бутстрап:

  • Bootstrap использует float для создания сетчатой ​​системы, о которой многие говорят, не предназначен для Интернета, где flex-box делает обратное, сохраняя гибкость в отношении размера и содержимого элементов; такая же разница, как использование пикселей против em/rem, или как управление вашими div только с использованием полей и отступов и никогда не устанавливая заранее определенный размер.

  • Bootstrap, поскольку он использует float, требуется clearfix после каждой строки, или вы получите несогласованные divs разной высоты. Flex-box не делает этого и вместо этого проверяет самый высокий div в контейнере и придерживается его высоты.

Единственная причина, по которой я бы пошел с загрузкой через flex-box, - это отсутствие поддержки браузера (в основном IE) (уже умереть). И иногда вы получаете другое поведение от Chrome и Safari, хотя оба используют один и тот же движок webkit.

Edit:

BTW, если единственная проблема, с которой вы сталкиваетесь, - это столбцы с одинаковой высотой, для этого существует довольно много решений:

  • Вы можете использовать display: table для родителя, а display: table-cell; - для ребенка. См. Как получить ту же высоту в отображении: table-cell

  • Вы можете использовать абсолютное позиционирование для каждого div:
    position: absolute; top: 0; bottom: 0;

  • Существует также решение jquery/JS, и другое решение, которое я не могу вспомнить на данный момент, я попытаюсь добавить позже.

Edit:

Также проверьте http://chriswrightdesign.com/experiments/flexbox-adventures/ и https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties о том, как работает гибкая коробка.

Изменить 2: https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

Ответ 2

Я не использую Flexbox (я прочитал об этом и, кажется, замечательно), но im the bootstrap frontend dev. Я предлагаю вам протестировать страницы печати Flexbox, прежде чем принимать окончательное решение. Вы знаете... иногда стили печати - страшная головная боль, и Bootstrap помогает мне, когда мне приходится разрабатывать форматы печати. ​​

Ответ 3

Я боюсь, что вы пропустили еще одну статью о трюках CSS:

Примечание: макет Flexbox наиболее подходит для компонентов приложения и мелкомасштабных макетов, в то время как макет сетки предназначен для более масштабных макетов.

Не означает, что вы не можете попробовать, но просто подумайте дважды. И все зависит от нужной поддержки браузера в конце.