1. flex設定元素垂直居中對齊
在之前的一篇文章中記載過如何垂直居中對齊，方法有很多，但是在學習了flex布局之後，垂直居中更加容易實現
html**：
這是乙個測試這是乙個測試這是乙個測試這是乙個測試這是乙個測試css**：
.demo效果如圖：.inner
2. 用flex布局製作導航欄
以前在寫導航欄的時候，總是用float或者display：inline-block實現，但是這兩種方法都會有各種問題，比如浮動會影響父元素以及兄弟元素的樣式，需要清除浮動
現在用flex會很方便，並且是彈性布局
html**：
css**：ul效果如圖所示：li
我們只要在html**裡面多加兩個li元素，導航便彈性變化
不需要改變css**，即可在導航欄中增加專案
3. 有時候需要做成左圖右文字的樣式，如下圖所示：
此時用flex會很方便
html**：
iphone7 plus *********xcss**：總人數99
剩餘人數33
立即參與
.demo甚至有多列布局，.demo > div
.left
.right
確認取消
css**：
.demo4. 固定百分比布局：.demo > div
html**：
(1) 等分布局：
（2）某乙個固定
（3）某兩個固定
（4）三個固定
5. 聖杯布局，如圖所示
頭部css**：left
center
right
底部
.demo6. 輸入框布局，有時需要在輸入框的前部新增提示，或者後部新增按鈕，如圖所示：.demo div
.body
.header,.footer,.left,.right
html**：
searchcss**：
.demo7. 底部footer固定在底部，但是不是fixed定位input
頁面會經常用到固定的底欄，但是當頁面內容過少時，footer會到頁面中間，下面用flex來解決
html**：
這是主要內容css**：這是底部
.demo8. 流式布局 ，如下如所示：.main
.footer
html**如下：
css**：
.demo.item
display flex彈性布局
display flex 火狐支援無字首，谷歌和opera支援 webkit 字首寫法，比較適合移動端開發使用 例子 1 23header header a 注釋 display屬性設定flew，所有子元素都會自動變成伸縮專案，預設是橫向排列，若flew flow值設為column，變為縱向排列，f...
display flex 布局教程
布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。css view...
display flex 布局教程
布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。css view...