Flexbox проти Twitter Bootstrap (або подібний фреймворк) [закрито]

Я нещодавно виявив, Flexboxколи шукав рішення, щоб зробити діви однакової висоти, залежно від найвищої.

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

Тепер питання: Які плюси і мінуси flexbox? Чи є щось, що неможливо зробити з Flexbox, що можна зробити з такою рамкою, як Bootstrap (звичайно, мова йде лише про сітку)? Який з них швидший, коли впроваджується на веб-сайті?

Я здогадуюсь, коли лише для сітчастої системи розумніше використовувати чисто flexbox, але що робити, якщо ви вже використовуєте рамку, чи flexboxможна щось додати?

Чи є якісь причини вибрати flexbox"сітчасту систему" над рамкою?

З декількох причин, flexbox набагато краще, ніж завантажувальний:

• Bootstrap використовує поплавці для створення сітчастої системи, яка, як кажуть багато хто, не призначена для Інтернету, де flex-box робить навпаки, зберігаючи гнучкість до розміру та вмісту елементів; така ж різниця, як використання пікселів проти em / rem, або, як, наприклад, керування дивами лише за допомогою поля та прокладки та ніколи не встановлюючи попередньо визначений розмір.

• Для завантажувальної програми, оскільки вона використовує floats, потрібно чіткий виправлення після кожного рядка, інакше ви отримаєте нерівні знаки різної висоти. Flex-box цього не робить, а замість цього перевіряє найвищий діл у контейнері та дотримується його висоти.

Єдина причина, з якої я б хотів завантажуватися через flex-box, - це відсутність підтримки браузера (в основному IE) (вже гинуть). І іноді ви отримуєте різну поведінку від Chrome і Safari, хоча обидва користуються одним і тим же движком веб-кайтів.

Редагувати:

До речі, якщо єдиною проблемою, з якою ви стикаєтеся, є стовпчики рівної висоти, для цього існує досить багато рішень:

• Ви можете використовувати display: tableдля батьків, для display: table-cell;дитини. Див. Як отримати однакову висоту на дисплеї: таблиця-комірка

• Ви можете використовувати абсолютне позиціонування для кожного ключа:
  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 (я читав про це і, здається, це чудово), але я Fottend Dev Bootstrap. Я пропоную вам протестувати сторінки друку Flexbox, перш ніж приймати остаточне рішення. Ви знаєте ... Іноді стилі друку - це страшний головний біль, і Bootstrap мені дуже допомагає, коли мені доводиться розробляти формати друку.

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

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

Це не означає, що ви можете не спробувати, а просто подумайте. І все врешті залежить від бажаної підтримки браузера.