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

Question

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

145

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

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

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

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

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

Rvervuurt 22 дек. 2014, в 07:17

Источник

5

Я использую Flexbox с Bootstrap.
Aibrean 22 дек. 2014, в 15:25
2

Взгляните на Zurb Foundation для приложений . он полностью построен на основе Flexbox Grid System
Salem Ouerdani 07 авг. 2015, в 08:54
2

Это может быть полезно. Bootstrap теперь переключается с float на flex
Faizan Akram Dar 06 фев. 2016, в 07:52
1

Bootstrap 4 теперь является flexbox по умолчанию! Flexbox - это чрезвычайно мощный инструмент компоновки, обеспечивающий беспрецедентную гибкость и контроль над сеточной системой и основными компонентами. Это происходит за счет отказа от поддержки IE9, но вносит значительные улучшения в расположение, выравнивание и размеры компонентов.
Nermien Barakat 29 июнь 2017, в 12:10
2

Я не согласен, что это должно быть закрыто как основанное на мнении. Аскер ищет факт, а не мнение. "Каковы плюсы и минусы flexbox?" Аскер (как и я) пытается определить сильные стороны и недостатки каждой системы.
Darin Cardin 22 сен. 2017, в 13:26

Показать ещё 3 комментария

Теги:

twitter-bootstrap

html

css

flexbox

3 ответа

Ещё вопросы

Взгляните на Zurb Foundation для приложений . он полностью построен на основе Flexbox Grid System
Это может быть полезно. Bootstrap теперь переключается с float на flex
Bootstrap 4 теперь является flexbox по умолчанию! Flexbox - это чрезвычайно мощный инструмент компоновки, обеспечивающий беспрецедентную гибкость и контроль над сеточной системой и основными компонентами. Это происходит за счет отказа от поддержки IE9, но вносит значительные улучшения в расположение, выравнивание и размеры компонентов.
Я не согласен, что это должно быть закрыто как основанное на мнении. Аскер ищет факт, а не мнение. "Каковы плюсы и минусы flexbox?" Аскер (как и я) пытается определить сильные стороны и недостатки каждой системы.

ctf0 · Answer 1 · 2014-12-22T10-39-00.000Z

По нескольким причинам 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

Спасибо за ваш комментарий. Я не смог найти никаких объяснений того, что было «лучше» из этих двух, поэтому я надеюсь, что мой вопрос (и ваши, и будущие ответы) помогут людям решить. К счастью, IE 11 сейчас занимает большую долю рынка, чем предыдущие три версии вместе взятых (из которых flexbox поддерживает flexbox ), поэтому, на мой взгляд, его можно использовать безопасно. Каково ваше мнение об использовании комбинации фреймворка и flexbox ? Конечно, не обращая внимания на сеточную систему фреймворка.
Flexbox может быть использован для создания более мощной грид-системы более простым способом, но сам по себе не является грид-системой. Более того, в упрощенных сеточных системах представлены некоторые идеи, а ZURB Foundation for Apps использует flexbox для макета
на самом деле вы можете использовать и то, и другое, если хотите, и я считаю, что это лучший выбор, потому что вам не нужно сосредотачиваться на том, к чему вы уже привыкли в течение достаточно долгого времени (например, для тех, кто не знает ничего кроме BS), но для меня преимущество Flex-box в том, что он обладает той же гибкостью, которую можно получить только с помощью JS, но без написания ни одной строки кода.
Полная информация о совместимости: caniuse.com/#feat=flexbox Обратите внимание, что у старых Android также есть проблемы.
Черт возьми, и я подумал, что мы почти готовы его использовать, кажется, потребуется еще год или что-то в этом роде b4, мы увидим это в дикой природе, спасибо за хедз-ап.
@cvrebert да, более старый Android не совместим, но он также не совместим с начальной загрузкой, и большинство пользователей старого Android используют браузер, такой как Chrome, а не браузер Android в любом случае.
Новый бутстрап перешел с поплавков на гибкий, проверьте это
Является ли flexbox альтернативой сеточной системе Bootstrap или является дополнительным? Я спрашиваю, потому что bootstrap v4 переключает свою сеточную систему на использование flexbox, что это действительно означает?
@DeepakMittal не является альтернативой, в последнем выпуске BS вы можете использовать сетку на основе flexbox или сетку на основе числа с плавающей точкой, или и то, и другое, если хотите, но это потребует некоторой настройки.
Bootstrap, вероятно, будет основой, которую вы используете для всего сайта, включая его грид-систему. Flexbox не является полной CSS-инфраструктурой, и я не думаю, что было бы справедливо предполагать, что пользователи могут заменить Bootstrap на Flexbox, не так ли ?! Также Bootstrap 4 будет использовать Flexbox.

kurroman · Answer 2 · 2014-12-22T11-52-00.000Z

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

вот почему вы должны использовать сетку с плавающей точкой только для печатаемых элементов div в сочетании с классами начальной загрузки

Kout · Answer 3 · 2015-02-02T15-35-00.000Z

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

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

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

Убедитесь, что вы понимаете, что в статье говорится о новом появившемся макете Grid, а не о сетке начальной загрузки.
Должен сказать, что я скучал по этому! :) Спасибо за исправление.
Выраженный голосом, вы указали на очень четкое различие в том, как использовать flex box и grid без конфликта намерений и целей, и для меня не имеет значения, имеете ли вы в виду загрузочную сетку или grid ayout