单词小记

direction     方向
wrap          包装
flow          流
justify       证明
content       内容
align         对齐
items         项目
evenly        均匀
around        周围

1. vw和vh (根据视图宽高布局)

vw：view width(视图宽度) 将整个宽度分成100份
铺满整个页面，且不出现滚动条
    width:100vw
    height:100vh
calc(值1 - 值2) 对设置的属性进行数值计算，要有空格！
overflow:scroll(显示滚动条)

2. 三栏布局

两侧固定宽度，中间自适应

3. flex布局

主要用于移动端布局

3.1 flex布局原理

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效，定位不失效。

3.2 父项常见属性

flex-direction: 设置主轴的方向
    row:               默认值，从左到右
    row-reverse:       从右到左
    column:            上下
    column-reverse:    下上
flex-wrap: 设置主轴是否换行
    nowrap:            默认，不换行
    wrap:              换行
flex—flow: 复合属性
    相当于同时设置了flex-direction和flex-wrap        
justify-content: 设置主轴上子元素的排列方式
    flex-start:        默认，从头开始。如果x是主轴，左右:
    flex-end:          从尾开始
    center:            居中
    space-between:     先两边贴边，再平分剩余空间
    space-evenly:      每个元素平分空间
    space-around:      两侧的间距是中间元素间距的二分之一
align-items: 设置侧轴上子元素的排列方式(单行)
    flex-start:        从头开始
    flex-end:          从尾开始
    center:            居中显示
    stretch:           拉伸
align-content: 设置侧轴上子元素的排列方式(多行)
    flex-start:        默认，从头开始
    flex-end:          从尾部开始排列
    center:            侧轴中间
    space-between:     先两边贴边，再平分剩余空间
    space-around:      两侧的间距是中间元素间距的二分之一
    stretch:           拉伸

3.3 子项常见属性

align-self: 控制子项自己在侧轴的排列方式
    允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items属性，值与items一样
order: 定义子项的排列顺序(数值越小越靠前，默认0)
flex: 子项目占的份额