前言：本篇隨筆是對彈性盒子有了解的人來寫的這篇文章，具體屬性產生的效果這裡不做說明，基礎的東西去查文件。這裡只是總結。
時至今日，css3的flex彈性盒子在移動端基本上都是支援的，但不排除有些些低版本的裝置（android4.4以下，只能相容舊版的flexbox布局），還有個別的國產裝置並不支援flex那麼就需要用到舊版的flex-box。
在移動端布局呢，我們最常用的無非這麼幾種情況
1、垂直居中
2,、平分
3、分配剩餘區域
那麼我們需要用到新舊盒子的哪些屬性呢？請看下面
一、開啟彈性盒子
新：flex
display:flex
舊：display:flex-box
二、主軸的排列對齊方式
新：justify-content: flex-start | flex-end | center | space-between | space-around;
舊：box-pack: start | end | center | justify;
三、側軸的排列對齊方式
新：align-items: flex-start | flex-end | center | baseline | stretch;
舊：box-align:box-align: start | end | center | baseline | stretch;
這裡要重點提一下stertch:讓子元素在側軸方向拉伸佔滿盒子。
四、分配剩餘空間
新：flex:
舊：box-flex
五、定義主軸（預設是x軸），還有排列的方向（預設是從左向右）
新：flex-direction: row | row-reverse | column | column-reverse;
舊：
box-direction: normal | reverse | inherit;
box-orient: horizontal | vertical | inline-axis（等同於horizontal） | block-axis(等同於vertical) |inherit;
說明：舊的用兩個屬性分別來控制主軸和排列方向，新的只用乙個。
其中，inline-axis是預設值。且horizontal與inline-axis的表現似乎一致的，讓子元素橫排；而vertical與block-axis的表現也是一致的，讓元素縱列。
七、在移動端我們需要加上 -webkit-字首
css彈性盒子
css3 彈性盒子 flexible box 或 flexbox 是一種 用於在頁面上布置元素的 布局模式，使得當頁面布局必須適應不同的螢幕尺寸和不同的顯示裝置時，元素可 地執行。對於許多應用程式，彈性盒子模型提供了對塊模型的改進，因為它不使用浮動，flex容器的邊緣也不會與其內容的邊緣摺疊。css...
css 彈性盒子
彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。彈性盒子由彈...
CSS 彈性盒子
清除浮動影響 很難實現居中 結構不靈活 不能隨時新增盒子 非常靈活 提供一套瀏覽器內建布局 特點 一維布局 固定的css屬性 外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳 img ae7v8cwh 1607776830159 media 彈性盒相容性.png 決定了 這個布局一般用在移...