1.彈性盒子是css3的一種新的布局模式
2.css彈性盒，是一種當頁面需要適應不同的螢幕大小時確保元素擁有恰當的行為的布局樣式
3.引入盒子布局模型的目的是為了提供乙個有效的方法來對乙個容器中的元素進行對齊，排列和分配空白空間（即讓乙個容器中的所有元素等間距排列）
4.彈性盒子是由彈性容器和彈性子元素組成
5.彈性子元素通常情況下在彈性盒子內一行顯示，預設每個容器只有一行
6.彈性容器通過設定display：flex；或display：inline-flex來將其定義為彈性容器
7.彈性容器的幾個重要的屬性如下
屬性描述
flex-direction
指定彈性容器中彈性子元素的排列方式
justify-content
設定彈性盒子元素在主軸（橫軸）方向上的對齊方式
align-items
設定彈性盒子元素在主軸（橫軸）方向上的對齊方式
flex-wrap
設定彈性盒子元素超出父容器是否換行
align-content
修改flex-wrap屬性的行為，設定行對齊
flex-flow
flex-direction和 flex-wrap的結合
order
設定彈性盒子的子元素的排列方式
align-self
在彈性子元素上使用，覆蓋align-items屬性
在彈性容器的屬性中重要掌握justify-content和align-items
justify-content的屬性值
flex-start
預設值。專案位於容器的開頭。
flex-end
專案位於容器的結尾。
center
專案位於容器的中心。
space-between
專案位於各行之間留有空白的容器內。
space-around
專案位於各行之前、之間、之後都留有空白的容器內。
align-items的屬性值值描述
stretch
預設值。元素被拉伸以適應容器。
center
元素位於容器的中心。
flex-start
元素位於容器的開頭。
flex-end
元素位於容器的結尾
baseline
元素位於容器的基線上
eg01：
在移動端的頁面顯示
此處只展示了彈性盒的部分屬性，其餘屬性自己嘗試操作。
在移動端顯示必不可缺的一行**為
/*viewport:視覺化視窗
width=width-device:設定頁面寬度與裝置的寬度一樣
initial-scale:顯示的和文字的初始比例為1.0
user-scalable:禁止用雙擊或兩指拿捏縮小和放大螢幕
*/
移動端 彈性盒子布局
1.基本概念 採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專案 flex item 簡稱 專案 容器預設存在兩根軸 水平的主軸 main axis 和垂直的縱軸 cross axis 主軸的開始位置 與邊框的交叉點 ...
移動布局之彈性布局
flex是flexble box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專案 flex item 簡稱 專案 flex...
移動端flex彈性布局容器常用屬性
下列屬性用於設定容器，也就是父盒子 在flex布局中，分為主軸和側軸。預設情況下，水平方形為主軸，水平向右，垂直方向為側軸，垂直向下。flex direction屬性可以改變預設的主軸設定 body div span 1.設定水平方向為主軸，專案從左向右排列 flex direction row 設...