1. 流式布局
百分⽐布局也叫作流式布局、弹性盒布局。⼿机⽹页没有版⼼，都左右撑满。
百分⽐能够设置的属性是width、height、padding、margin。其他属性⽐如border、font-size不能⽤百分⽐设置的。
如果⽤百分⽐写width，那么指的是⽗元素width的百分之多少。
如果⽤百分⽐写height，那么指的是⽗元素height的百分之多少。
flex-direction容器主轴的⽅向
flex-wrap
flew-flow
justify-content
align-items
align-content
1. flex-direction容器主轴的⽅向
<
row: 默认值，由左到右。
row-reverse ：由右到左
column：由上到下
column-reverse：由下到上
2. flex-wrap 换不换⾏
.
nowrap：表⽰不换⾏ 设置的项⽬的宽度就失效了，强⾏在⼀⾏显⽰wrap：正常换⾏，第⼀个位于第⼀⾏的第⼀个
wrap-reverse：向上换⾏，第⼀⾏位于下⽅
3. flex-flow 1 2合起来写
.
4. justify-content 横向对齐⽅式，纵向撑满
.
flex-start：默认值，左对齐
flex-end：右对齐
center：左右居中对齐
space-between：两端对齐
space-around：每个项⽬两侧的间距相等
5. align-items 在交叉轴(纵轴)上的对齐显⽰
.
stretch：默认值：纵向撑满
flex-start：上对齐
flex-end：下对齐
center：垂直居中对齐
baseline：⼦元素第⼀⾏⽂字的基线对齐
6. align-content 4 5合起来写
.
stretch：先由左到右，再从上到下，纵向撑满，有⼏⾏分⼏份
flex-start：先从左到右，再从上到下，挤到左上⾓
flex-end：先从左到右，再从上到下，挤到左下⾓
center：先从左到右，再从上到下，挤到中间靠左
space-between：先从左到右，再从上到下，纵向分上下
space-around：先从左到右，再从上到下，最外⾯的上下间距之和等于中间各个间距
2.2 ⼦元素的⼀些属性
order 排序的位置，默认值为0，数值越⼩越靠前
flex-grow 属性
flex-shrink 属性
flex-basis属性
flex属性
align-self 属性
1. orde 排序的位置，默认值为0，数值越⼩越靠前
.
2 flex-grow 如何分配剩余空间
.
flex布局对齐方式
3. flex-shrink 超出空间怎么压缩
4. flex-basis item所占主轴空间，优先级⾼于width
5. flex 2 3 4的和写 默认值为：0 1 auto
.
6. align-self 当前项⽬可以和其他项⽬拥有不⼀样的对齐⽅式
.
3. rem布局
rem是相对于根元素的字体⼤⼩的单位
实现强⼤的屏幕适配布局(淘宝，腾讯,⽹易等⽹站都是rem布局适配)rem能等⽐例适配所有屏幕，根据变化html的字体⼤⼩来控制rem的⼤⼩，如不同html字体⼤⼩的计算下,rem值不同
html{font-size:100px;}设置成100px⽅便我们计算，如 6rem等于600px。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。