Flex布局 讓你的布局更完美
CSS3 Flex布局
有很多人和我一樣吧，剛開始學HTML的時候用的都是傳統的布局，有時用心設計的HTML+CSS樣式可能由于對方的設備、瀏覽器的原因，導致用戶瀏覽頁面時的顯示效果非常丑陋。很早之前W3C為了解決解決這個問題，提出了一種新的方案----Flex（Flexible Box）布局，也就是"彈性布局"，它可以為盒狀模型提供最大的靈活性，可以適應不同的頁面，就算瀏覽器怎么變，也不會破壞我們的樣式了。不過得注意設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。下面我將大概說下flex是干嘛的。
如圖我們想設計的網頁樣式是這樣的

.box1{height: 500px;background: #eee; } .box1 div{width: 200px;height: 200px;background: #E49E1A;margin: 10px;float: left; }

而用戶打開的可能是這樣

可以看到我們的樣式都變了，所以我們為了避免這種情況，可以使用flex布局
如圖第二行

.box2{height: 300px;background: #CFF446;display: flex; } .box2 div{width: 200px;height: 200px;background: #E49E1A;margin: 10px; }

我們可以看到用了flex布局后，就算頁面的寬度變了，樣式也不會變。
flex容器的屬性有6個（建議你們試一下）。
①flex-direction(決定排列方向)：row(左往右)、row-reverse(右往左)、column(上往下)、column-reverse(下往上)

.box2{height: 300px;background: #CFF446;display: flex;flex-direction: row;//row-reverse、column、column-reverse } .box2 div{width: 200px;height: 200px;background: #E49E1A;margin: 10px; }

②flex-wrap：nowrap(不換行)、wrap(換行，上往下)、wrap-reverse(換行，下往上)

.box2{height: 300px;background: #CFF446;display: flex;flex-wrap: nowrap;//wrap、wrap-reverse } .box2 div{width: 200px;height: 200px;background: #E49E1A;margin: 10px; }

③flex-flow（是flex-direction和flex-wrap的簡寫，我就懶得放代碼了）
④justify-content：
flex-start(左對齊)

flex-end(右對齊)

center（居中）

space-between(兩端對齊，間隔也相等)

space-around(每個元素兩側的間隔相等)

⑤align-items：
flex-start(交叉軸的起點對齊)

flex-end(交叉軸的終點對齊)

center(交叉軸的中點對齊)

baseline（元素的第一行文字的基線對齊， 畫歪了不必在意（づ￣3￣）づ）

stretch（如果元素未設置高度或設為auto，將占滿整個容器的高度）
(下圖中元素沒設置高度)

⑥align-content(如果只有一根軸線，該屬性不起作用)：
stretch(軸線占滿整個交叉軸)
flex-start(與交叉軸的起點對齊)
flex-end(與交叉軸的終點對齊)
center(與交叉軸的中點對齊)
space-between(與交叉軸兩端對齊，軸線之間的間隔平均分布)
space-around(每根軸線兩側的間隔都相等)
上面我就不演示辣，自己試下。
其實它還有6個項目(注意：不是容器)的屬性：
①order
②flex-grow
③flex-shrink
④flex-basis
⑤flex
⑥align-self
我就不說了，自己找資料看下(其實是我懶辣)???！

總結

以上是生活随笔為你收集整理的Flex布局 让你的布局更完美的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。