**彈性盒模型**
給父級新增flex
display：flex；
flex-wrap：wrap；換行
**彈性盒模型主軸，縱軸方向**
flex-direction：row-reverse；從右到左，元素主軸的方向
預設值row，從左到右
column 從上到下
column-reverse 從下到上
**主軸（水平）方向的對齊方式**
justify-content：flex-end 右對齊
flex-start 左對齊，預設
center 居中
space-around 間隔相等
space-between 兩端對齊
**交叉軸（垂直）方向的排布**
align-items：stretch 預設值
flex-start 起點對齊
flex-end 終點對齊
center 中點對齊
baseline 專案的第一行文字的基線對齊
auto 將沾滿整個容器的蓋度
space-between 兩端對齊
space-around 間隔相等
**彈性增長因子**
flex-grow：
**彈性縮小因子**
flex-shrink：
**子元素的大小屬性**
flex：auto
none
inital
inherit
**子元素排布順序**
order屬性： 整數值；
屬性定義專案的排列順序，數值越小，排列越靠前，預設為0
**單個子元素在縱軸的順序**
align-self屬性：
![在這裡插入描述](
彈性盒模型
1.父元素新增display 瀏覽器核心字首 box 2.瀏覽器核心字首 box orient vertical是盒模型的布局方向，預設橫向顯示 3.搜狗是webkit核心，大多相容性與谷歌相同。4.元素布局方向 與float類似 瀏覽器核心字首 box direction reverse 處理剩餘...
彈性盒模型
1 css3彈性盒模型 面試題！1.1 怪異盒模型與標準盒模型 1.1.1 兩者邊框大小一樣，彈性盒模型content大小發生變化。總體不變。標準盒模型content大小不變，總體發生變化。怪異盒模型 box sizing content box 標準盒模型 box sizing border bo...
彈性盒模型
1.flex 靈活性。採用flex布局的元素，flex容器 2.給裝眾多相同盒子的父盒子display flex.將盒子平均分配寬。它所有的子元素就會自動成為這個容器成員，flex專案。當所有子元素的寬大于父元素的寬，則子元素的寬由父盒子決定，平均分配寬。當所有子元素的寬小於父元素的寬，則子元素的寬...