display : flex ; 弹性盒布局
flex:1; 此元素在弹性盒中占多少比例
flex-direction 伸缩流方向
设置一个主轴方向，弹性盒内的元素以此方向排列
row 水平方向，从左到右排列
row-reverse 水平方向，从右到左排列
column 垂直方向，从上到下排列
column-reverse 垂直方向，从下到上排列
flex-wrap 伸缩换行
nowrap 默认值，不会换行
wrap 会换行
wrap-reverse 会换行，但是会颠倒顺序
justify-content 主轴(水平)对齐
flex-start 向左边靠
flex-end 向右边靠
center 向中间靠
space-between 第一个元素向左边，最后一个元素向右边
space-around 平均分配在其中
align-items 侧轴(垂直)对齐
flex-start 向上靠
flex-end 向下靠
center 向中间靠
baseline 以第一行的文字基线对齐
stretch 默认值，拉伸元素，填满上下
可以通过媒体类型为不同设备指定不同样式
方式一：
@media 媒体类型{
}
方法二：
< link rel="stylesheet" href="style.css" media="媒体类型" />
媒体类型：
all 所有设备
braille 盲文触觉回馈设备
embossed 盲文打印机
handheld 便携设备
print 打印用纸或打印预览图
projection 投影设备
screen 电脑显示器
speech 语音或者音频合成器
tv 电视机
tty 使用固定密度字母栅格的媒介
媒体特性是css3对媒体类型的增强版
@media 媒体类型 and (max-500px){ } < link rel="stylesheet" href="style.css" media="only screen and (max-500px;)" />
媒体特性通过min/max来表示小于，大于
device-width 设置屏幕的输出宽度
device-heigh 设置屏幕的输出高度
width 渲染界面的宽度
height 渲染界面的高度
orientation 横屏或竖屏
resolution 分辨率
color 色彩的字节数
color-index 色彩表中的色彩数