**介紹更全面
display:flex;//將容器設定為彈性布局，預設是自左向右依次排列
容器屬性
flex-end 靠右對齊
space-between 左右兩端對齊,中間補空格，專案之間的距離是相等的
space-around 專案之間的間距是左右兩側距離的2倍，也就是(1+2)*2=3
space-evenly 專案之間間距和專案與容器之間間距相等，也就是1=2=3(瀏覽器上效果並未出現，模擬器上可看到效果)
二、align-items:參考值
flex-start 這個是flex預設效果，自左向右顯示
center 垂直居中，所有的專案都是垂直居中顯示
flex-end 延交叉軸底部對齊
這兩個屬性可以配合著在容器中使用，來達到想要的效果
比如：justify-content：center;
algin-items：center;
這樣出來的效果就是水平垂直居中
三、flex-direction：參考值 排列方式
參考值row 按行排列，也是預設方式
row-reverse 專案反轉，是根據**進行倒序排序顯示的
比如我的**如果設定了row-reverse ，出來的結果就是3->2>1
為什麼居右顯示沒搞明白，試了模擬器也是一樣的效果
column 按列排列，也就是換行顯示專案
column-reverse 專案按列翻轉
四、flex-wrap
用這套**測試
nowrap 當專案總寬度》容器的寬度，強行等分專案寬度且不換行
wrap 當專案寬度》容器的寬度，換行顯示
注意：如果存放的下專案則在當行顯示，否則就換行
專案屬性
一、order：數值
根據專案中設定的order數值大小進行排列，數值越小越排前
範圍沒有要求，只要是整數即可(0，負數，正整數)
二、flex分為三個屬性
①、flex-grow：0 或者 1
0 表示不放大專案自身，預設為0
1 表示放大自身占去容器剩餘空間，如果多個專案設定為1，則設定為1的所有專案平分專案空間，自身設 置的width不生效。
②flex-shrink ：0 或 1
1 表示等比列縮小專案
0 表示即使空間不足也不縮小自身
預設是1，
③flex-basis 預設auto,專案保持預設寬度或者專案自身width寬度，如果設定值則flex-basis>專案自身的width。
三、align-self：參考值等同align-items
說明專案中的align-self的級別》容器中的align-items
彈性布局flex 介紹
摘自 網頁布局 layout 是css的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布...
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...
Flex布局（彈性布局）
flex是flex box的縮寫，即彈性布局。任何乙個容器都可以指定為flex布局。行內元素也可以使用flex布局。webkit核心的瀏覽器，必須加上 webkit字首。box.box.box注意 設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用fl...