display:flex 新增在伸縮容器（父元素的）
flex-direction： 伸縮布局方向 row 左向右 row-reverse 水平返向 column 上向下 column-reverse
flex-wrap:換行 nowrap不換行（預設值） wrap 換行（超出才換行，不超出不換行） wrap-reverse換行反向
當主軸方向是水平的 上下反向 當主軸方向垂直時 左右反向
justify-content:主軸的對齊方式（水平對齊方向） flex-start起點 flex-end 終點 center 居中 sapce-around 平均分，兩端留白 space-between 平均分，兩端不留白
align-items: 側軸的對齊方向（單行的垂直對齊方式） flex-start起點 flex-end 終點 center 居中
align-self ：（單個的垂直對齊） flex-start起點 flex-end 終點 center 居中
align-content:(多行的垂直對齊)必須和flex-wrap一起用 flex-start起點 flex-end 終點 center 居中 sapce-around 平均分，兩端留白 space-between 平均分，兩端不留白 stretch 拉伸（預設值）
order 順序 值越大越靠後，可以取負值 預設為0
父元素：display:flex flex-direction flex-wrap justify-content align-items align-content
子元素的： order align-self flex
彈性盒模型，flex布局
彈性盒子是css3的一種新布局模式，由容器 父元素 和專案 子元素 組成。彈性盒子是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒模型的目的 提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白區間。設定彈性盒子 display flex或...
css 彈性盒模型Flex 布局
參考文章 flex 布局是什麼 採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專案 flex item 簡稱 專案 容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 如下 fle...
flex彈性盒布局（layout）
1.布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float 屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2.2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。3.已經得到了所有瀏覽器的支援 4.fl...