1、css3彈性盒模型
面試題！！
1.1、怪異盒模型與標準盒模型
1.1.1、兩者邊框大小一樣，彈性盒模型content大小發生變化。總體不變。
標準盒模型content大小不變，總體發生變化。
怪異盒模型：
box-sizing：content-box
標準盒模型：
box-sizing:border-box
2、定義彈性盒模型：
2.1、父級新增宣告display:flex
2.2、平分盒模型空間：flex:1
2.3、相容性：加字首
display:-webkit-flex
3、排列方式：
flex-direction
3.1、豎向排列，從上到下：flex-direction:colum
3.2、橫向排列，從左到右：flex-direction:row（預設）
3.3、橫向反方向，從右到左：flex-direction:row-rever
3.4、豎向反方向，從下到上：flex-direction:colum-rever
4、主軸（justity-content）
4.1、x軸，從頂部開始（預設方式）：justify-content:flex-start
4.2、x軸，從末端開始：justify-content:flex-end
4.3、x軸，從中間到兩邊，justify-content:flex-center
4.4、兩端對齊，中間自適應：justify-content:space-between
4.5、自動分配距離：justify-content:space-around
5、側軸（y軸）
5.1、排列方式
align-items
5.2、align-items:flex-start
5.3、align-items:flex-end
5.4、align-items:flex-center
5.5、align-items:baseline作用與flex-first等效
5.6、設定居中：（面試題！！！）
x軸：justify-content：flex-center
y軸：align-items：center
6、換行（flex-wrap）
6.1、必須滿足條件：橫向排列（flex-direction:row）
6.2、換行方式：
6.2.1、換行：flex-wrap:wrap
6.2.2、不換行：flex-wrap:nowrap
6.2.3、反轉換行，即上下顛倒換行：flex-wrap:wrap-reverse
7、行與行之間的對齊
align-conter
7.1、必須滿足條件：
條件1：有多行，即多個div
條件2：換行：flex-wrap:wrap
7.2、對齊方式
7.2.1、水平居左：align-content:start
7.2.2、水平居中：align-content:center
7.2.3、水平居右：align-content:end
8、單獨設定元素位置（子級）
align-self
8.1、左 div:nth-child(1)
8.2、中flex-center
8.3、右flex-end
8.4、若子級無寬高，則繼承父級：align-self:stretch
8.5、繼承父級：align-self:baseline
8.6、繼承父級：align-self:auto
9、優先順序
order
9.1、order與z-index的區別
order值越大，權重越小
z-index值越小，權重越大
10、flex
10.1、平均分配：flex:1
書寫格式：
1、定義彈性盒模型
display:flex
2、設定水平排列
flex-wrap:row
3、設定主軸
justify-content:flex-start
彈性盒模型
1.父元素新增display 瀏覽器核心字首 box 2.瀏覽器核心字首 box orient vertical是盒模型的布局方向，預設橫向顯示 3.搜狗是webkit核心，大多相容性與谷歌相同。4.元素布局方向 與float類似 瀏覽器核心字首 box direction reverse 處理剩餘...
彈性盒模型
1.flex 靈活性。採用flex布局的元素，flex容器 2.給裝眾多相同盒子的父盒子display flex.將盒子平均分配寬。它所有的子元素就會自動成為這個容器成員，flex專案。當所有子元素的寬大于父元素的寬，則子元素的寬由父盒子決定，平均分配寬。當所有子元素的寬小於父元素的寬，則子元素的寬...
彈性盒模型
彈性盒模型 給父級新增flex display flex flex wrap wrap 換行 彈性盒模型主軸，縱軸方向 flex direction row reverse 從右到左，元素主軸的方向 預設值row，從左到右 column 從上到下 column reverse 從下到上 主軸 水平 ...