Flexbox kontra tabele, dlaczego potrzebujemy flexbox?

Czy ktoś może podoba mi się oświecić mnie, w jaki sposób nowy model układu Flexbox jest lepszy niż obecne sposoby tabel? (wyświetlacz: tabela i wszystkie są uwzględnione w moim przypadku)?Flexbox kontra tabele, dlaczego potrzebujemy flexbox?

To nie jest obsługiwane w ogóle w IE10, co nie jest zbyt dobre w najbliższej przyszłości, a po prostu nie widzę żadnych korzyści w porównaniu do układu tabeli. Mimo to Internet zaczyna być pełen "czcicieli" tej nowej metody układania CSS, a wszystkie przykłady, które widzę, można łatwo zrobić z normalnym css bez problemów.

Aktualizacja 25.12.15:

Używam flexboxes dużo, ponieważ zostały one wprowadzone do nowoczesnych przeglądarek i zatrzymał się przy użyciu display:table i tak dalej, bo flexboxes są bardziej wydajne i proste w obsłudze.

Źródło

2013-08-24 vsync

Nigdy wcześniej nie słyszałem o modelu, ale na pierwszy rzut oka wygląda to świetnie - w końcu wydaje się semantycznie czysty sposób na wykonanie wszystkich elementów układu, które były możliwe tylko przy użyciu tabel (wyrównanie elementów w grid top/center/bottom, z grupą dynamicznie rozciągającą się), ale bez '

' '' 'lub obłąkanego obejścia' display: table'. –

'dispay: table' nie jest w moim przekonaniu całkowicie szalony i jest bardzo elegancki. opisuje element jako tabelę, a następnie możesz kontrolować jego dzieci, jak chcesz, a część semantyczna zawsze zależy od ciebie, flexbox to nie HTML, to tylko css. – vsync

'display: table' jest nadal podłączony do koncepcji tabel, która prawdopodobnie nie jest semantycznie poprawna podczas budowania układu. Flexbox wydaje się wreszcie przełamywać i dodawać kolejne sposoby kontrolowania układu. Czekałem na coś podobnego (ale oczywiście nie jest to jeszcze gotowy rynek masowy, gdy jest używany samodzielnie ... i nie ma sensu używać go w połączeniu z 'display: table', ponieważ jest to wspierane przez wszystkie przeglądarki) –

Odpowiedz

Istnieją trzy wyróżnienia mogę myśleć pomiędzy użyciem schematu flexbox i korzystania z wartości wyświetlanych tabel lub płynie do układu strony:

Będąc w stanie zmienić kolejność elementów niezależnie od kolejności źródłowym HTML, zachowując elementy w normalnym przepływie - możesz to zrobić, podając wartość całkowitą z właściwością order.
Wymaga mniejszego pisania niż tradycyjne układy float (nie potrzebujesz wszystkich pseudoelementów dla celów czyszczenia) i jest bardziej semantyczny, podczas gdy używanie pływających lub tabel dla układów oczywiście nie jest.
Możliwość rozwijania i zmniejszania się elementów elastycznych w celu wypełnienia przestrzeni poziomej i pionowej na podstawie wymiarów elementów przodka - przy użyciu właściwości flex-grow i flex-shrink.

Problem (jak już zauważyłeś) jest to, że wsparcie jest nadal bardzo złe; W rzeczywistości Firefox nadal implementuje starszą wersję modułu Flexbox, więc musisz uwzględnić niewielkie rozbieżności w składni i zachowaniu, w zależności od używanej przeglądarki. Mówi się jednak całkiem sporo, że jest to przyszłość układów, szczególnie w przypadku złożonych aplikacji internetowych, które pojawiają się częściej. Warto się uczyć, jeśli nie masz nic przeciwko zrobieniu nieuchronnie mądrej inwestycji - kosztem nie bycia naprawdę użytecznym teraz.

Ja również proponuję przyjrzeć this smashing magazine article dla przyjaznej wprowadzenie do schematu flexbox (nie jest to dość niedawno pisemne)

Źródło

2013-08-24 14:40:15 Transparent

http://learnlayout.com/flexbox.html Firefox jest obecnie całkiem niezły. Nawet bez prefiksu. – vsync

Krótko mówiąc, jest to coś, co przyniesie wiele korzyści w ciągu kilku lat. Podobnie jak wiele zaawansowanych technik CSS, HTML5 itp., Kilka osób zaadoptuje je z bolesnymi awariami i shims/shivami na kilka następnych lat.

Gdy przeglądarki będą go obsługiwać w przyszłości, będziemy mieć imprezę i nienawiść w "starych" przeglądarkach, które ich nie obsługują :).

Źródło

2013-08-24 13:35:03 yochannah

ale mogę zrobić chyba wszystko, co można myśleć o aktualnym CSS, nie widzę jak zmienia się coś Flexbox – vsync

@vsync: Prawdopodobnie można uzyskać większość wyników bez flexbox, ale w niektórych przypadkach tylko po dostosowaniu także twój DOM. –

@ DanielA.R.Werner. tak napisałem to lata temu, kiedy flexbox był daleki od stabilności i "zamknięty". od tego czasu używam go szeroko – vsync

Model schematu flexbox jest silniejsze niż tabeli wyświetlacza. Flexbox obsługuje na przykład układy dla języków od prawej do lewej. I rzeczywiście, flexbox jest nieco skomplikowany i jest barierą wejścia. Układy Float i clearfix to (sprytny) hack, w jakiś sposób w taki sam sposób, w jaki układy tabel są hackami, flexbox jest przeznaczony do układu.

Obsługa przeglądarki jest coraz lepsza, niektórzy mówią, że powinniśmy use it now.Bootstrap 3 nie korzysta jednak z flexbox, ale mogę sobie wyobrazić, że będzie to następna wersja.

Źródło

2013-10-20 14:04:28

To "hack", jeśli widzisz to w ten sposób, nie widzę w ogóle 'display: table' jako hack, ale jako sposób na uporządkowanie informacji na stronie. i pływaki mogą być tak złożone, jak wszystko inne, zależą od implementacji. I osobiście, nie robię tego Bootstrapa przez bardzo utalentowanych ludzi, tylko dlatego, że Keanu Reeves jest sławny, nie czyni go dobrym aktorem. Pomyśl o tym .. – vsync

Przepraszam, z układami tabel miałem na myśli tę technikę starej szkoły, używając prawdziwych '

' s. –

ho well tables SĄ tabele, a nie układ :) – vsync

Powiązane problemy