ps：第一篇笔记，用来记录下最近学习内容吧～
- position属性：指定元素在网页中的位置，主要有五个值。
- static
默认值，按照源码的顺序排列元素的位置。元素与元素之间不会产生重叠。
- relative
相对于默认位置（static）进行偏移，定位基点是元素的默认位置。
- absolute
相对于上级元素（一般是父元素）进行偏移，且上级元素属性不是static，定位基点是上级元素。
- fixed
相对于视口（浏览器窗口）进行偏移，元素位置不随页面滚动而发生变化。定位基点是浏览器窗口。
- sticky
实现动态固定的效果，类似relative与fixed的结合。必须搭配top、bottom、left、right使用，否则等同于relative定位。
-
display属性：flex（弹性布局） 和 grid（网格布局）。下面主要介绍flex布局。
任何一个容器或者行内元素都可以指定为flex布局。元素的float、vertical-align、clear属性无效。
采用flex布局的元素称为container（容器），其子元素为item（项目）。
容器默认存在两根轴：水平方向的主轴（main-axis)和垂直方向的交叉轴（cross-axis）。主轴开始位置称为 main-start，结束位置main-end。交叉轴同理。
项目默认沿主轴排列，占据主轴空间称为main-size，占据交叉轴空间称为cross-size。
- 容器的属性
1.1 flex-direction：决定项目排列方向
.box {
flex-direction: row | row-reverse | column | colomn-reverse;
}
1.2 flex-wrap：项目换行方式
.box {
flex-wrap: nowrap | wrap | wrap-reverse;
}
1.3 flex-flow：是flex-direction和flex-wrap的简写，默认值为row nowrap。
.box {
flex-flow: row | nowrap;
}
1.4 justify-content：项目在主轴上的对齐方式。默认左对齐。
.box {
justify-content: flex-start | flex-end | center | space-between| space-around;
}
1.5 align-items：项目在交叉轴上的对齐方式。默认值为stretch。
.box {
align-items: flex-start | flex-end | center | stretch | baseline;
}
1.6 align-content：定义了多根轴线的对齐方式，如果只有一根轴线，该值不起作用。
.box {
align-content: flex-start | flex-end | center | stretch | space-between | space-around;
}
2. 项目的属性
2.1 order：项目的排列顺序，数值越小，排列越靠前，默认为0。
.item {
order: <integer>; /* default 0*/
}
2.2 flex-grow：项目的放大比例，默认为0，即存在剩余空间，也不放大。
.item {
flex-grow: <number>; /* default 0*/
}
2.3 flex-shrink：项目的缩小比例，默认为1，即空间不足，项目将缩小。
.item {
flex-grow: <number>; /* default 1*/
}
2.4 flex-basis：定义了分配多余空间之前，项目占据的主轴空间。
.item {
flex-basis: <length> | auto; /* default auto */
}
2.5 flex：flex-grow、flex-shrink、flex-basis的简写。默认为 0 1 auto。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
2.6 align-item：允许单个项目和其他项目有不同的对齐方式，可覆盖align-items属性。默认值为auto。如果没有父元素，等同于stretch。
.item {
align-item: auto | flex-start | flex-end | center | stretch | baseline;
}
参考：
