Flexbox vs Twitter Bootstrap (lub podobny framework) [zamknięty]

Niedawno odkryłem Flexbox, że szukałem rozwiązania umożliwiającego utworzenie elementów div o tej samej wysokości, w zależności od najwyższego.

Przeczytałem następującą stronę na CSS-tricks.com i przekonałem mnie, że flexboxjest to bardzo potężny moduł do nauki i używania. Jednak sprawiło to również, że pomyślałem o tym, że Twitter Bootstrap (i podobne frameworki) oferują podobne funkcje (+ oczywiście dużo więcej), co ich systemy gridowe.

Teraz pojawiają się pytania: Jakie są zalety i wady flexbox? Czy jest coś, czego nie można zrobić z Flexboxem, co można zrobić z frameworkiem takim jak Bootstrap (oczywiście mówiąc wyłącznie o systemie grid)? Który z nich jest szybszy po wdrożeniu na stronie internetowej?

Zgaduję, że tylko w przypadku systemu grid jest mądrzejszy w czystym użyciu flexbox, ale co, jeśli już używasz frameworka, czy jest coś do flexboxdodania?

Czy są jakieś powody, aby wybrać flexbox„system siatki” zamiast frameworka?

Z kilku powodów flexbox jest znacznie lepszy niż bootstrap:

• Bootstrap używa pływaków do tworzenia systemu siatki, który wielu powiedziałoby, że nie jest przeznaczony dla sieci, gdzie flex-box robi coś przeciwnego, pozostając elastycznym w stosunku do rozmiaru i zawartości elementów; taka sama różnica, jak w przypadku używania pikseli w porównaniu z em / rem lub jak kontrolowanie elementów div tylko za pomocą marginesów i dopełnienia, bez ustawiania wstępnie zdefiniowanego rozmiaru.

• Bootstrap, ponieważ używa elementów zmiennoprzecinkowych, wymaga korekty po każdym wierszu, w przeciwnym razie otrzymasz źle wyrównane elementy div o różnej wysokości. Flex-box tego nie robi i zamiast tego sprawdza najwyższy div w kontenerze i trzyma się jego wysokości.

Jedynym powodem, dla którego wybrałbym bootstrap na flex-box, jest brak obsługi przeglądarki (głównie IE) (już umieram). Czasami zachowujesz się inaczej niż Chrome i Safari, mimo że oba używają tego samego silnika webkit.

Edytować:

A tak przy okazji, jeśli jedynym problemem, z jakim się borykasz, są kolumny o równej wysokości, istnieje kilka rozwiązań:

• Możesz użyć display: tablena rodzicu, display: table-cell;na dziecku. Zobacz, jak uzyskać taką samą wysokość w display: table-cell

• Możesz użyć pozycjonowania bezwzględnego dla każdego elementu div:
  position: absolute; top: 0; bottom: 0;

• Jest też rozwiązanie jquery / JS i inne rozwiązanie, którego w tej chwili nie pamiętam, a które spróbuję dodać później.

Edycja 2:

Sprawdź również http://chriswrightdesign.com/experiments/flexbox-adventures/ i https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties, aby dowiedzieć się, jak działa flex-box.

Edycja 3: https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

Edycja 4: https://caniuse.com/#feat=flexbox

Nie korzystałem z Flexboksa (czytałem o tym i wydaje mi się, że jest świetny), ale jestem deweloperem Bootstrap frontend. Proponuję przetestować strony druku Flexbox przed podjęciem ostatecznej decyzji. Wiesz ... Czasami style drukowania są strasznym bólem głowy, a Bootstrap bardzo mi pomaga, kiedy muszę projektować formaty drukowania.

Obawiam się, że przegapiłeś kolejny artykuł o sztuczkach CSS :

Uwaga: Układ Flexbox jest najbardziej odpowiedni dla składników aplikacji i układów na małą skalę, podczas gdy układ Grid jest przeznaczony do układów o większej skali.

Nie oznacza to, że nie możesz próbować, ale pomyśl dwa razy. Ostatecznie wszystko zależy od pożądanej obsługi przeglądarki.