（轉(zhuǎn)載請注明來源）

學(xué)習(xí)的目的是使用，使用的前提是已記住。本文簡單、凝練的總結(jié)了Flex布局的基本概念和用法，需要到實際使用中查漏補(bǔ)缺，筆者認(rèn)為這是學(xué)習(xí)CSS知識點的一個好方法。

Flex布局的產(chǎn)生

傳統(tǒng)的網(wǎng)頁布局解決方案，是基于盒子模型，依賴position、float、margin等屬性，但是有一些不可忽視的缺點，比如說：垂直方向的布局（依賴給定height、margin-top等會帶來各種問題），于是2009年，W3C提出了Flex布局方案。

Flex布局的基本概念

"Flex"是Flexible Box的縮寫，意為“彈性盒子”，任何一個盒子就可以使用Flex布局。

.box { display:flex }

使用了flex布局的元素被稱為flex容器，它里面的所有子元素就成了容器成員，稱之為“flex項目”（flex item）

axis

容器默認(rèn)兩根軸main-axis&cross-axis，main size,main start,main end等屬性均以此兩軸為依據(jù)。

Flex的基本用法

（只給屬性用法，不給效果，如果自己不去試一下，永遠(yuǎn)都記不?。?/i>

容器的六個屬性：

容器屬性

項目的六個屬性

項目屬性

注意：

設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。

以上，F(xiàn)lex布局要點介紹完成，若要掌握并靈活運(yùn)用，需多使用才能融會貫通。