----盒子属性
1、display: flex弹性盒子
2、flex-direction主轴元素排列方向
row （默认值）主轴为水平方向，起点在左端
row-reverse 主轴为水平方向，起点在右端
column 主轴为垂直方向，起点在上沿
column-reverse 主轴为垂直方向，起点在下沿
3、justify-content主轴元素排列方式
flex-start （默认值）左对齐
flex-end 右对齐
center 居中
space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
space-between 两端对齐，项目之间的间隔都相等
4、align-content辅轴元素排列方式（多行）
flex-start 辅轴起点对齐
flex-end 辅轴终点对齐
center 辅轴居中
space-around 辅轴每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
space-between 辅轴两端对齐，轴线之间的间隔平均分布
stretch （默认值）轴线占满整个交叉轴
5、align-items 辅轴元素对齐方式（单行）
strech （默认值）如果项目未设置高度或设为auto，将占满整个容器的高度
flex-start 辅轴起点对齐
flex-end 辅轴终点对齐
center 辅轴居中
baseline 项目的第一行文字的基线对齐
6、flex-wrap元素是否换行
Nowrap （默认） 不换行
wrap 换行，第一行在上方
wrap-reverse 换行，第一行在下方
----元素属性
1、flex-grow 父元素有剩余空间时，子元素按比例放大
2、flex-shrink 父元素的空间不足以容纳子元素时，子元素按比例收缩
3、flex-basis （默认auto）元素在主轴的基准值，参考元素自身的宽度/高度
如果传递一个具体的数值则以该数值为准，如果主轴是横向的，则该值指定的就是元素的宽度。如果主轴是纵向的，则该值指定的就是元素的高度
4、简写：flex：伸展系数 收缩系数 基准值
5、order元素排列顺序，数值越小排列越靠前
6、字体超过两行超过部分以省略号显示
display: -webkit-Box;
overflow: hidden;
-webkit-Box-orient: vertical;
-webkit-line-clamp:2;
7、字体超过一行超过部分以省略号显示
overflow:hidden;
white-space:Nowrap;
text-overflow:ellipsis;
8、position定位，通过定位可以将放到页面的任意位置
static 元素没有开启定位，默认
relative 相对定位
1、不设置top,left,bottom,right等偏移量，元素位置不会发生变化
2、是相对于自身在文档流中的位置进行定位的
3、不脱离文档流
4、设置偏移量后，原来所占据的那个位置空间依然还在，不会被其他布局填充
absolute 绝对定位
1、不设置top,left,bottom,right等偏移量，元素位置不会发生变化
2、是相对于其包含块进行定位的（包含块：开启了定位的父元素，如果所有的父元素都没有开启定位则包含块就是窗口视图）。会随滚动条移动
3、脱离文档流
fixed 固定定位
1、不设置top,left,bottom,right等偏移量，元素位置不会发生变化
2、是相对于其窗口视图进行定位的。不会随滚动条移动
3、脱离文档流
sticky 粘性定位
1、可以在元素到达指定位置时将其固定
2、不脱离文档流
