彈性布局是html中十分方便的乙個布局，它可以讓結構中的內容自適應不同的解析度，簡化了許多繁瑣的**，今天就簡單來介紹一下彈性布局的用法。
彈性布局：
display:flex;顧名思義，就是讓內容變得像彈簧一樣具有彈性，在需要內容自適應的結構中，它是乙個極其方便的工具，它分為主軸和側軸兩個軸，就像x軸跟y軸一樣。
彈性布局的語法分為兩塊兒：一.加給父容器的語法。二.加給內容的語法。
加給父容器的語法有：
display:flex;
flex-direction:row / column / row-reverse / column-reverse ;
flex-wrap: nowwrap / wrap / wrap-reverse ;
jusitfy-content: flex-start / flex-end / center / space-between / space-around / space-evenly ;
align-content: flex-start / flex-end / center / space-between / space-around / space-evenly ;
align-items： stretch / flex-start / flex-end / center；
加給子元素的語法有：
flex-grow:0~1 ;
flex-shrink:0~1 ;
flex-basis: 具體值;
display:flex;就是將容器轉變成乙個彈性盒子
flex-direction： ； 就是確定主軸的方向，row水平為主軸，column垂直為主軸。-reverse就是反向，預設水平方向為主軸。
flex-wrap： ； 內容放不下時是否折行。預設不折行nowrap。
jusitfy-content： ；主軸方向上的對齊方式。
flex-start ： 子項都去起始位置對齊。
flex-end ： 子項都去結束位置對齊。
center ： 子項都去中心位置對齊。
space-between : 表現為兩端對齊。between是中間的意思，意思是多餘的空白間距只在元素中間區域分配。
space-around : around是環繞的意思，意思是每個flex子項兩側都環繞互不干擾的等寬的空白間距，最終視覺上邊緣兩側 的空白只有中間空白寬度一半。
space-evenly : evenly是勻稱、平等的意思。也就是視覺上，每個flex子項兩側空白間距完全相等。
flex-start ： 子項都去起始位置對齊。
flex-end ： 子項都去結束位置對齊。
center ： 子項都去中心位置對齊。
space-between : 表現為兩端對齊。between是中間的意思，意思是多餘的空白間距只在元素中間區域分配。
space-around : around是環繞的意思，意思是每個flex子項兩側都環繞互不干擾的等寬的空白間距，最終視覺上邊緣兩側的空白只有中間空白寬度一半。
space-evenly : evenly是勻稱、平等的意思。也就是視覺上，每個flex子項兩側空白間距完全相等。
注意！：(最少需要兩行才能看出效果，因為他是多行的乙個上下對齊方式)，並且有一行它就會把整個容器等分成幾份。沒有高度時設定除了預設值以外的值他的高度會由內容決定
stretch預設值
flex-star
flex-end
center
flex-grow：；
0~1（預設為0）
子元素會按照設定的比例值來分配空隙，如果比例值總和小於1，那麼會有空隙，如果比例值總和大於等於1，那麼就沒有空隙。
flex-shrink：；
1~0（預設為1）
0表示不收縮，.5收縮小一些，2收縮大一些。（大小是跟正常縮放1進行比較的）
寫0時，他就不收縮了，內容過了會溢位。一些特殊需求會用到
下面時彈性布局的注意點，非常用一犯錯。
1.預設情況下，在彈性盒子中的子元素的左右排列的。
2.水平是主軸的時候：預設情況下，當寬高不寫的時候，寬度由內容決定，高度由父容器 決定。
垂直是主軸的時候：預設情況下，當寬高不寫的時候，寬度由父容器決定，高度 由內容決定。
3.當子項的總寬度大於父容器的時候，會自動收縮的（彈性的優先順序是大於自身固定大小的）
4.當子項的內容已經達到了父容器最小寬高的時候，就會出現溢位的現象。
5.彈性布局中用的頻率比較多的語法：
display : flex;
flex-direction;
justify-content;
align-items;
flex;
下面寫乙個彈性布局的基本結構：
沒有加彈性的時候預設垂直排列，如下：
給父容器#father加上彈性，預設主軸方向為水平方向：
此時他會像浮動一樣水平排列，並且比浮動的操作方式更簡潔。
我們再讓改變他的主軸方向上的排列形式：
可以明顯看出space-around與space-evenly的區別。
側軸便之舉乙個例子了。
測試文字測試文字
測試文字測試文字
測試文字測試文字
align-items與align-content的區別：align-content:center對單行是沒有效果的,而align-items:center不管是對單行還是多行都有效果,其實在正常的開發中align-items用的更多這點一定要記住區別。
彈性布局的簡單介紹就這麼多，想要更深入的了解彈性布局的特性還是需要多敲**看看不同**的不同點，這樣更容易理解。
HTML彈性布局
1 display flex 給父容器新增這個屬性 2 display flex 容器新增彈性布局後，顯示為塊級元素 display inline flex 容器新增彈性布局後，顯示為行級元素 3 設為 flex布局後，子元素的float clear屬性將失效。但是position屬性，依然生效。2...
flex彈性布局 用法
簡介 傳統的做法，我們要準確的定位乙個元素，需要知道元素具體的寬度 高度 padding margin 配合position display float屬性，這樣是實現了元素的定位，但是這樣未免太過麻煩，而且也有一些弊端，比如 如何實現垂直劇中？flex布局就解決了這樣的問題，也簡易了元素的布局。f...
html5 彈性布局一
1.彈性布局，解決高度塌陷的問題 2.彈性布局只對他的直接子元素控制，子元素的子元素不控制 3.彈性布局有主軸概念，當x軸為主軸，y為側軸，預設主軸的方向從左到右。flex direction row row reverse 從左到右 從右到左 當y軸為主軸時側軸為x軸，預設方向是從上到下。flex...