適合做螢幕自適應的網頁
兩部分：
1.父元素新增
display：flex
flex-direction:
row 左右排列
row-reverse 左右映象顛倒
colum 讓子元素上下排列
colum-reverse 上下映象顛倒
flex-wrap：是否進行換行處理
nowrap(預設) 不換行
wrap 換行 處理
wrap-reverse 反向換行
flex-flow：flex-direction和flex-wrap的復合寫法
justify-content 在主軸上決定子元素的對齊和分布方式
flex-start 子元素都去起始位置對齊
flex-end 子元素都去末尾位置對齊
center 子元素居中對齊
space-between 兩端對齊
space-around 每個子元素的左右兩邊都填加相同的外邊距
space-evenly 平均排列，每個子項與子項的距離都相同
align-items 子項的內容大小不一致時決定子項的大小和對齊
stretch（預設） 拉伸
flex-start 頂部對齊
flex-end 底部對齊
center 中心對齊
align-content 多行的側軸的對齊方式（最少需要兩行才能起到效果），與justify-content相反
預設情況，子元素會自動左右排列
預設情況，當寬高不寫的情況下，寬度由內容決定，高度和父容器一致
注：當子元素的總寬大于父元素的寬時，子元素不會換行，而是縮小自身的寬，使所有子元素都能放下。
注：子元素雖然會縮小自身，但是最小只能縮小到和內容的大小一樣，如果父容器還是放不下，就會溢位。
注：彈性布局適合做一維的，網格布局適合做二維的。
2.子元素新增
order： 排序
0（預設）
值越大越往後排
flex-grow：擴充套件（必須有空隙才能擴充套件）
0（預設） 不擴充套件
1 擴充套件，會將該子項擴大把空隙佔滿
.5 擴充套件，會占領空隙的一半。
注：當多個子項都有該屬性，且值相加大於一，會按照比例進行分配
收縮0（預設） 不收縮
1 收縮
.5 收縮一半
2 成倍收縮
flex-basis：
指定某個子項的大小，如100px
如果剩餘空間沒有100px，則佔滿剩餘空間
align-self:和align-items很象，只針對某個子項
1.作用在容器上：
display：grid 網格布局
grid-template-rows：100px 200px 300px 3行 第一行高100px 二行高200px 三行高300px
grid-template-colums：100px 200px 2列 第一列寬100px 第二列寬200px
注：可以使用fr作為比例單位 1fr 1fr 1fr 代表3等分 repeat（5，1fr） 分成5份比例是1
grid-template-areas 劃分區域
grid-template 是grid-template-rows、grid-template-colums和grid-template-areas符合寫法
grid-column-gap 列的間距
grid-row-gap 行的間距
justify-items 水平
start 靠左
center 左右居中
end 靠右
注；會使子項的寬由內容決定
align-items 垂直
start 頂部
center 上下居中
end 底部
place-items 復合寫法
順序是align-items、justify-items
justify-content 整個網格的水平分布
stretch（預設）
start
center
endspace-between 兩端對齊
space-around 每個子元素的左右兩邊都填加相同的外邊距
space-evenly 平均排列，每個子項與子項的距離都相同
align-content 整個網格的垂直分布
stretch（預設）
start
center
endspace-between 兩端對齊
space-around 每個子元素的左右兩邊都填加相同的外邊距
space-evenly 平均排列，每個子項與子項的距離都相同
place-content 復合寫法
順序：align-content、justify-content
Flex彈性盒模型
flex direction用來控制子項整體布局方向，是從左往右還是從右往左，是從上往下還是從下往上。flex direction row 布局的排列方向 主軸排列方向 row 預設值，顯示為行。方向為當前文件水平流方向，預設情況下是從左往右。row reverse 顯示為行。但方向和row屬性值是...
彈性盒模型，flex布局
彈性盒子是css3的一種新布局模式，由容器 父元素 和專案 子元素 組成。彈性盒子是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒模型的目的 提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白區間。設定彈性盒子 display flex或...
理解CSS彈性盒模型flex
css3引入了一種新的布局模型 flex布局。flex是flexible box的縮寫，一般稱之為彈性盒模型。和css3其他屬性不一樣，flexbox並不是乙個屬性，而是乙個模組，包括多個css3屬性。flex布局提供一種更加有效的方式來進行容器內的專案布局，以適應各種型別的顯示裝置和各種尺寸的螢幕...