本文不是一篇入門的文章所有請(qǐng)符合以下條件的戰(zhàn)斗人員繞道：
1、初學(xué)前端，對(duì)前端的傳統(tǒng)布局還不是很熟悉的人
2、后端人員對(duì)前端不打算深入學(xué)習(xí)的同學(xué)
二、開篇
flex布局原本是好幾個(gè)月前就一直想學(xué)習(xí)的東西，當(dāng)時(shí)flex布局還算是比較新鮮的玩意，轉(zhuǎn)眼間flex布局已經(jīng)不再新鮮，而且這些年，隨著瀏覽器對(duì)ES6的支持情況日益增強(qiáng)，使得我們?cè)絹碓接斜匾W(xué)習(xí)一下怎樣去使用好flex布局，廢話我也就不多說了，我們就直奔主題吧
三、何為flex
說到什么是flex這里就引用以下阮一峰老師的定義
布局的傳統(tǒng)解決方案，基于盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對(duì)于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)。
我認(rèn)為flex布局最大的優(yōu)勢(shì)就是在其的“彈性”，“彈性”主要表現(xiàn)在flex布局不同于盒子模型的百分比布局和CSS3支持的響應(yīng)式布局，以下有幾種情況是盒子模型中的這些布局所不便實(shí)現(xiàn)的：
1、瀏覽器的視口空間不足，要求視口中的特定塊要按照比例進(jìn)行縮放
2、應(yīng)對(duì)一些布局是要以基準(zhǔn)線(baseline)對(duì)齊的特殊布局方法
3、需要模塊垂直居中
延伸閱讀
學(xué)習(xí)是年輕人改變自己的最好方式