Flexbox 是一個強大的新生CSS布局模塊,完全脫離于傳統的web開發實踐。網上有很多相關的文章,大都關注于規范的細節,導致文章冗長,難懂,甚至有些晦澀。相反,對于設計師和開發者如何使用 flexbox 解決布局問題的討論相當少,至此,這篇文章出現了。
從基礎層面上來講,flexbox有三個特性是設計之根本。但也是在很長一段時間內單純使用CSS很難或者不可能完成任務:對齊方式,排布和順序。
Flexbox在最終形成今天的規范之前,歷經了三次迭代。每一次迭代都伴隨著不同的屬性名,在不同瀏覽器下有著相應的特定前綴。而現在,我們所處在這樣的時刻,所有的瀏覽器都支持無前綴的終極規范,但是想要兼容低版本的瀏覽器還有很多坑要填。正因如此,我強烈建議你按照 flexbox 的最終規范編寫代碼,并且使用最新的瀏覽器進行測試,然后再去實現向前兼容。想要讓你編寫的代碼同時兼容所有的瀏覽器是一件很頭疼的事。
盡管flexbox可以和其它的CSS布局系統一同工作,但是在開始使用新的系統之前,丟掉以前在web布局中的假設和實踐很重要。這是一種全新的工作方式,如果堅持以前的思維,你將受到阻礙。
你可能偶爾聽到“flexbox 是用來干啥干啥的”。誠然,其它的布局系統會很快的補充上 flexbox——比如 grids 和 regions,但這種稱述并不完全準確。CSS不是語義化的,沒有哪一個 CSS 特性就是固定做某件事情的。你可以使用任意的 CSS 來完成你的需求,唯一的問題是什么樣的代碼才能更高效的實現目標。正如我們看到的,flexbox 解決了設計者在布局上正面臨的諸多問題。
Flexbox以前的幾個版本給現在的開發者們帶來了一些風險:很可能讀到一篇沒有指明書寫時間的文章,最后發現自己正在看2009年的flexbox 規范說明(現在已經廢除)所以,時刻謹慎小心,提高警惕。