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


161

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?


5
Używam Flexbox z Bootstrap.
Aibrean

2
Spójrz na Fundację Zurb dla aplikacji . jest w całości zbudowany na systemie Flexbox Grid
Salem Ouerdani,


1
Bootstrap 4 to teraz domyślnie flexbox! Flexbox to niezwykle wydajne narzędzie do projektowania, zapewniające niezrównaną elastyczność i kontrolę nad systemem siatki i podstawowymi komponentami. Odbywa się to kosztem rezygnacji z obsługi IE9, ale przynosi znaczące ulepszenia w układzie, wyrównaniu i wymiarowaniu komponentów.
Nermien Barakat

5
Nie zgadzam się, że powinno to zostać zamknięte jako oparte na opiniach. Pytający szuka faktów, a nie opinii. „Jakie są zalety i wady flexboxa?” Pytający (podobnie jak ja) próbuje określić mocne strony i wady każdego systemu.
Darin Cardin,

Odpowiedzi:


107

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


1
Dzięki za komentarz. Nie mogłem znaleźć żadnego wyjaśnienia, co było „lepsze” z tych dwóch, więc mam nadzieję, że moje pytanie (oraz twoje i przyszłe odpowiedzi) pomogą ludziom zdecydować. Na szczęście IE 11 zyskuje teraz większy udział w rynku niż poprzednie trzy wersje łącznie (z których IE10 obsługuje flexbox), więc moim zdaniem jest bezpieczny w użyciu. Jaka jest Twoja opinia na temat korzystania z kombinacji frameworka i flexbox? Oczywiście ignorując system gridowy frameworka podczas korzystania z niego.
Rvervuurt

2
Flexbox może być użyty do stworzenia mocniejszego systemu siatki w łatwiejszy sposób, ale sam nie jest systemem siatki. Better, Simpler Grid Systems pokazuje kilka pomysłów, a ZURB Foundation for Apps używa flexbox do celów układu
ckuijjer,

w rzeczywistości możesz użyć obu, jeśli chcesz, co uważam za najlepszy wybór, ponieważ nie musisz skupiać się na czymś, do czego jesteś przyzwyczajony od dłuższego czasu (na przykład dla tych, którzy nie wiedzą nic poza BS), ale dla mnie zaletą flex-boxa jest to, że ma taką samą elastyczność, jaką można uzyskać tylko za pomocą JS, ale bez pisania ani jednej linii kodu.
ctf0

Dane dotyczące pełnej zgodności: caniuse.com/#feat=flexbox Pamiętaj, że starszy Android również ma problemy.
cvrebert

dam, i myślałem, że prawie jesteśmy gotowi go używać, wygląda na to, że zajmie to kolejny rok lub coś takiego, b4 widzimy to na wolności, dzięki za heads-up.
ctf0

6

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.


właśnie dlatego używałbyś siatki float tylko dla drukowalnych elementów div w połączeniu z klasami drukowania bootstrap
ctf0

1

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.


24
Upewnij się, że rozumiesz, że artykuł mówi o nowym wyłaniającym się układzie Grid - a nie o gridzie bootstrap.
getsetbro

5
Muszę powiedzieć, że przegapiłem to! :) Dziękuję za sprostowanie.
Kout

Upvoted, trzeba podkreślić bardzo wyraźne rozróżnienie jak korzystać elastycznego pudełko i siatkę bez konfliktu intencji i celów, a dla mnie to nie ma znaczenia, czy masz na myśli grid bootstrap lub siatka ayout
Ahmad Farouk
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.