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.
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 '
'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:
order.flex-growiflex-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 '
ho well tables SĄ tabele, a nie układ :) – vsync
Powiązane problemy