flex 布局已經(jīng)流行好久了，從最開始大家都在用非官方標(biāo)準(zhǔn)的 box 布局（display: box; display: -webkit-box;）酌伊，到后來的各種兼容寫法跑筝，再到后來基本上就是只用 flex 了。
畢竟標(biāo)準(zhǔn)就是標(biāo)準(zhǔn)站欺，雖然有時(shí)候會(huì)遲到蜻懦，但是最終肯定還是主角甜癞。
現(xiàn)在的web前端項(xiàng)目，特別是管理系統(tǒng)和移動(dòng)端宛乃，都在大量使用 flex 布局了悠咱。一些流行的 UI 框架也是，比如 Bulma征炼，還有 Bootstrap（第5版會(huì)拋棄jQuery）析既。。谆奥。
不過眼坏，近期卻發(fā)現(xiàn)大伙對(duì) flex 布局這塊掌握的相當(dāng)?shù)娜酰鋵?shí)我掌握的也不好酸些，不過一些特別基礎(chǔ)的總還是要熟悉并且能熟練應(yīng)用到工作中啊宰译。今天咱們不記流水賬檐蚜，只把必須要熟悉的 flex 知識(shí)說一說。
1# 瀏覽器支持
只看 ie 就可以了沿侈，得 ie 11
2# flex 布局簡(jiǎn)介
flex 是 flexible box 的簡(jiǎn)寫闯第，也就是彈性盒子布局。它是 CSS3 的標(biāo)準(zhǔn)缀拭，不過它不是出現(xiàn)最早的彈性盒子布局咳短，如果你也用過 box 布局理解起來會(huì)很簡(jiǎn)單。
flex 布局是用來設(shè)置其子元素如何分配頁面空間的一種方式蛛淋，記好是子元素咙好。
3# 如果一個(gè)元素設(shè)置了 display: flex，它的子元素會(huì)發(fā)生一些變化铣鹏，先看下子元素的排列
.flex-demo{
display: flex;
}
默認(rèn)子元素會(huì)水平排列敷扫，不管是不是塊元素，如果想要垂直排列
.flex-demo{
display: flex;
flex-direction: column;// 加上這個(gè)诚卸，子元素就垂直排列了
}
flex-direction 屬性還有一些其它值，可以自己看下绘迁，至少要很清楚 row / column
4# 子元素的水平方向?qū)R
.flex-demo{
display: flex;
justify-content: center;// 水平居中對(duì)齊
}
可選的對(duì)齊方式很多合溺，flex-start | flex-end | center | space-between | space-around，居中和兩端對(duì)齊用的比較多缀台。其實(shí)也不用去記棠赛，知道 justify-content 是用來設(shè)置水平對(duì)齊的，值在瀏覽器里調(diào)試就好了膛腐，時(shí)間長了睛约，自己就記住了。
5# 子元素垂直方向?qū)R
.flex-demo{
display: flex;
align-items: center;// 垂直居中對(duì)齊
}
可選方式也不少哲身，flex-start | flex-end | center | baseline | stretch辩涝，都試下
有了上面兩個(gè)屬性，設(shè)置一個(gè)未知寬高的元素垂直水平居中就很容易了
6# 子元素彈性寬高設(shè)置勘天，特別注意怔揩，這個(gè)屬性是設(shè)置到子元素上的
.flex-item{
flex-grow:1;// 占滿父元素剩余的寬度，多個(gè)子元素都是 1脯丝，會(huì)平分父元素寬度
}
上面的 flex-grow:1 也可以簡(jiǎn)寫成 flex: 1商膊，常用的地方，比如下圖
按鈕的寬度不變宠进，文本框的高度會(huì)隨著屏幕的寬度自動(dòng)改變晕拆；這樣的需求用 flex 來做，大概的代碼如下
.flex-demo{
display: flex;
}
.search-btn{
width:80px;
...
}
.search-ipt{
flex-grow:1;// flex: 1
}
當(dāng)然材蹬，flxe 還有很多其它的屬性這里都沒有說到实幕，自行搜索學(xué)習(xí)吧吝镣，你是一個(gè)前端，不能這么愛偷懶茬缩！
