一、今日内容：背景缩放 background-size 设置宽高 cover contain
流失布局
就是百分比布局 也叫做非固定像素
通过盒子的宽度进行百分比设置达到根据屏幕的宽度进行相应伸缩目的，不受固定像素的限制
flex 弹性布局
任何元素都可以设置flex布局 设置flex布局的元素子元素 float clear 和vertical-align无效
采用flex元素的盒子被称为容器 里子元素称为项目
flex-dierction 设置主轴方向
属性
row x轴水平从左到右排列
row-reverse x轴水平从右到左 顺序颠倒
column y轴从上到下排列
column-reverse y轴从下到上排列 顺序颠倒
juistify-content 设置主轴子项的排列方式
属性
flex-start 从左到右排列
flex-end 从右到左排列 顺序不颠倒
center x轴居中
align-around 平分剩余空间
align-between 两边盒子贴边 中间子项平分剩余空间
align-steams 设置单行纵向排列
属性
flex-start 从左到右排列
flex-end 从纵轴尾部排列
center 纵轴居中
stretch 拉伸 子项不设置宽高拉伸至父项宽高
align-content 多行纵向排列 单行无效
flex-start 从左到右排列
flex-end 纵向尾部从左到右排列
center 纵向居中
space-around 纵向平分剩余空间
space-stween 纵向两边贴边 其余平分剩余空间
flex-warp 换行排列
默认不换行多余的像素 被后面元素覆盖nowarp
warp换行
flex-flow复合属性 是flex-direction 和flex-wrap复合属性
flex子项属性
align-self 对子项设置侧轴排列方式
没有该属性 继承父元素里align-stems
flex-start 从头开始
flex-end纵向尾部开始
center 纵向居中
order 定义项目排列的顺序
默认值0
数值越小 越靠前
flex来控制子项占份数
flex：1
子元素平分父项宽高
同一个盒子可以是容器也可以是项目
如果子元素设置宽高那么其他设置flex:1;将平分剩余空间
二、今日问题
无
三 解决方法
无
|
