更多優(yōu)質(zhì)內(nèi)容請(qǐng)關(guān)注微信公眾號(hào)@web前端工程獅 每篇文章都會(huì)帶示意圖、詳解、代碼，關(guān)注我和我一起學(xué)前端~整理一下日常開(kāi)發(fā)里常用的 彈性盒子（Flex Box）布局。

很難想象我曾經(jīng)一度執(zhí)著于用float、text-align、vertical-align等屬性來(lái)解決元素居中對(duì)齊的問(wèn)題，顯然，很多場(chǎng)景是無(wú)法滿足的。

一、Flex布局基礎(chǔ)概念Flex布局是CSS3的新特性，是日常開(kāi)發(fā)最常用的一種布局方式，避免了 float導(dǎo)致的布局塌陷、position: absolute脫離文檔…。