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

Я недавно обнаружил, 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;

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

Изменить 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 (я читал об этом и, кажется, это здорово), но я разработчик внешнего интерфейса Bootstrap. Я предлагаю вам протестировать печать страниц Flexbox, прежде чем принимать окончательное решение. Знаете ... Иногда стили печати - ужасная головная боль, и Bootstrap мне очень помогает, когда мне приходится создавать форматы печати.

Боюсь, вы пропустили еще одну статью о хитростях CSS :

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

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