彈性布局
display:flex 要發生彈性布局的子元素，他們的父元素，成為容器需設定display:flex
flex將塊級元素設定為容器
inline-flex將行內元素設定為容器 元素設定為flex容器後，容器的text-align，vertical-align失效
flex-direction 取值
row 預設值，主軸是x軸，主軸起點在左端
row-reverse 主軸是x軸，主軸起點在右端
column 主軸是y軸，主軸起點在頂部
column-reverse 主軸是y軸，主軸起點在底部
flex-wrap: 取值
預設值 nowrap 空間不夠時，不換行，專案會自動縮小
wrap 空間不夠時，專案不縮小，換行
wrap-reverse 專案換行，並反轉
justify-content 取值
flex-start 預設值，主軸起點對齊
flex-end 主軸終點
center 主軸中心
space-around 每個外邊距相同，兩端有空白
space-between 兩端對齊，兩端無空白
align-items: 取值
flex-start 預設值，交叉軸起點對齊
flex-end 交叉軸終點對齊
center 交叉軸中間對齊
baseline 基線，同flex-start類似
stretch 專案不寫高，充滿容器整個高度
flex:1;
// 要發生彈性布局的子元素設定 預設值： 0 1 auto
flex 是flex-grow,flex-shrink,flex-basis3個屬性結合在一起的縮寫形式,後兩個屬性可選寫
flex-grow
表示當子元素的空間小於父元素的空間時,如何處理剩餘空間,
預設值為0表示不占有剩餘空間;
當子元素都設定為1時表示平均分配剩餘空間;
當乙個子元素為2其餘子元素為1時為2的子元素佔據的剩餘空間比其他子元素多一倍;
當乙個子元素為1其餘子元素為0
,為1的子元素佔據全域性剩餘空間
felx-shrink
表示當子元素的空間大於父元素的空間時,如何縮小子元素
預設值為1表示等比縮小
當所有子元素都設定為1時所有子元素都會等比例縮小
當乙個子元素為0其餘子元素為1是表示為0的子元素不縮小,其餘元素縮小
flex-basis
用於設定專案佔據的主軸空間,設定為auto表示專案佔據的主軸大小等於專案的實際內容大小,設定為固定值表示專案佔據的主軸大小等於固定值
css 彈性布局
什麼是彈性布局？flex布局，是h5新出的布局方式，主要代替傳統float浮動布局。注意 布局要給父元素設定，子元素按照布局方式排列，他會使塊級元素不獨佔一行。特點 當沒有給彈性布局設定換行時，子元素不會自動換行會在一行顯示。display flex 設定彈性布局 flex direction 設定...
CSS 彈性布局
box box box 基本概念 row 預設值 主軸為水平方向，起點在左端。row reverse 主軸為水平方向，起點在右端。column 主軸為垂直方向，起點在上沿。column reverse 主軸為垂直方向，起點在下沿。nowrap 預設 不換行 wrap 換行，第一行在上方 wrap r...
css彈性布局
在移動端一種方便的布局方式，打破了之前用浮動，定位的布局，更加靈活。包含父元素和子元素，有對應的屬性應用在父元素和子元素達到布局的目的 要開啟彈性布局，父元素要先加上乙個flex屬性 display webkit flex safari display flex 當然，行內元素也可以用彈性布局，同樣...