flex 布局已經流行好久了，從最開始大家都在用非官方標準的 box 布局(display: box; display: -webkit-box;)，到后來的各種兼容寫法，再到后來基本上就是只用 flex 了。

畢竟標準就是標準，雖然有時候會遲到，但是最終肯定還是主角。

現在的web前端項目，特別是管理系統和移動端，都在大量使用 flex 布局了。一些流行的 UI 框架也是，比如 Bulma，還有 Bootstrap(第5版會拋棄jQuery)。。。

不過，近期卻發現大伙對 flex 布局這塊掌握的相當的弱，其實我掌握的也不好，不過一些特別基礎的總還是要熟悉并且能熟練應用到工作中啊。今天咱們不記流水賬，只把必須要熟悉的 flex 知識說一說。

1# 瀏覽器支持

只看 ie 就可以了，得 ie 11

2# flex 布局簡介

flex 是 flexible box 的簡寫，也就是彈性盒子布局。它是 CSS3 的標準，不過它不是出現最早的彈性盒子布局，如果你也用過 box 布局理解起來會很簡單。

flex 布局是用來設置其子元素如何分配頁面空間的一種方式，記好是子元素。

3# 如果一個元素設置了 display: flex，它的子元素會發生一些變化，先看下子元素的排列

.flex-demo { display: flex;}默認子元素會水平排列，不管是不是塊元素，如果想要垂直排列.flex-demo { display: flex; flex-direction: column; // 加上這個，子元素就垂直排列了}flex-direction 屬性還有一些其它值，可以自己看下，至少要很清楚 row / column

4# 子元素的水平方向對齊

.flex-demo { display: flex; justify-content: center; // 水平居中對齊}

可選的對齊方式很多，flex-start | flex-end | center | space-between | space-around，居中和兩端對齊用的比較多。其實也不用去記，知道 justify-content 是用來設置水平對齊的，值在瀏覽器里調試就好了，時間長了，自己就記住了。

5# 子元素垂直方向對齊

.flex-demo { display: flex; align-items: center; // 垂直居中對齊}

可選方式也不少，flex-start | flex-end | center | baseline | stretch，都試下

有了上面兩個屬性，設置一個未知寬高的元素垂直水平居中就很容易了

6# 子元素彈性寬高設置，特別注意，這個屬性是設置到子元素上的

.flex-item {flex-grow: 1; // 占滿父元素剩余的寬度，多個子元素都是 1，會平分父元素寬度}

上面的 flex-grow:1 也可以簡寫成 flex: 1，常用的地方，比如下圖

按鈕的寬度不變，文本框的高度會隨著屏幕的寬度自動改變；這樣的需求用 flex 來做，大概的代碼如下

.flex-demo { display: flex;}.search-btn { width: 80px; ...} .search-ipt { flex-grow: 1; // flex: 1}

當然，flxe 還有很多其它的屬性這里都沒有說到，自行搜索學習吧，你是一個前端，不能這么愛偷懶！

總結

以上是生活随笔為你收集整理的bootstrap 垂直居中 布局_CSS3 flex 布局必须要掌握的知识点的全部內容，希望文章能夠幫你解決所遇到的問題。

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