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


161

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

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

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

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

Есть ли какие-то причины выбирать flexbox«сеточную систему» ​​над рамочной?


5
Я использую Flexbox с Bootstrap.
Aibrean 22.12.14

2
Взгляните на Zurb's Foundation for Apps . он полностью построен на основе системы Flexbox Grid System
Салем Уердани


1
Bootstrap 4 теперь является flexbox по умолчанию! Flexbox - это чрезвычайно мощный инструмент макета, обеспечивающий беспрецедентную гибкость и контроль над сеточной системой и основными компонентами. Это происходит за счет отказа от поддержки IE9, но вносит значительные улучшения в расположение, выравнивание и размеры компонентов.
Нермиан Баракат

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

Ответы:


107

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


1
Спасибо за ваш комментарий. Я не смог найти никаких объяснений того, что было «лучше» из этих двух, поэтому я надеюсь, что мой вопрос (и ваши и будущие ответы) поможет людям решить. К счастью, сейчас IE 11 завоевывает большую долю рынка, чем предыдущие три версии вместе взятых (которые поддерживает IE10 flexbox), поэтому, на мой взгляд, это безопасно для использования. Каково ваше мнение об использовании комбинации фреймворка и flexbox? Конечно, не обращая внимания на сеточную систему фреймворка.
Rvervuurt

2
Flexbox можно использовать для более простого создания более мощной системы сетки, но она сама по себе не является системой сетки. Проще говоря , Simpler Grid Systems демонстрирует некоторые идеи, а ZURB Foundation for Apps использует flexbox для макета
ckuijjer

на самом деле вы можете использовать и то, и другое, если хотите, и я считаю, что это лучший выбор, потому что вам не нужно сосредотачиваться на том, к чему вы уже привыкли в течение достаточно долгого времени (например, для тех, кто не знает ничего кроме BS), но для меня преимущество Flex-box в том, что он обладает той же гибкостью, которую можно получить только с помощью JS, но без написания одной строки кода.
ctf0

Полная информация о совместимости: caniuse.com/#feat=flexbox Обратите внимание, что у старых Android также есть проблемы.
cvrebert

Черт возьми, и я подумал, что мы почти готовы его использовать, кажется, потребуется еще год или что-то в этом роде. Мы увидим это в дикой природе, спасибо за хедз-ап.
ctf0 22.12.14

6

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


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

1

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

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

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


24
Убедитесь, что вы понимаете, что в статье говорится о новом появившемся макете Grid, а не о сетке начальной загрузки.
getsetbro

5
Должен сказать, что я скучал по этому! :) Спасибо за исправление.
Кут

Подняв голос, вы указали на очень четкое различие в том, как использовать гибкую коробку и сетку без конфликта намерений и целей, и для меня не имеет значения, имеете ли вы в виду загрузочную сетку или сетку
Ахмад Фарук,
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.