CSS3+ 属性【个别属性记下】

一、flex相关属性含义：https://blog.csdn.net/dreamerzhang66/article/details/80200660

• flex容器【设置display：flex】

1. flex-direction: row; /*决定主轴的方向，即子项目（子元素）横向排列还是纵向排列*/
2. flex-wrap:nowrap; /*定义如果一条轴线排不下，如何换行*/
3. justify-content: flex-start; /*定义了项目在主轴上的对齐方式。*/
4. align-items: flex-start; /*定义项目在交叉轴上如何对齐。*/

• flex-item子项 https://www.cnblogs.com/guangzan/p/10291885.html

1. flex属性：这是集合属性。如，flex：0 1 auto；
2. flex-grow：表示当 子元素 的空间小于父元素的空间时，如何处理剩余空间。
3. flex-shrink：表示当子元素的空间大于父元素的空间时，如何缩小子元素。
4. flex-basis：用于设置项目占据的主轴空间，设置为auto表示项目占据的主轴大小等于项目的实际内容大小；设置为固定值表示项目占据的主轴大小等于固定值。
5. order: /*定义项目的排列顺序。数值越小，排列越靠前，默认为0。*/
6. align-self: /*允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性*/

二、grid相关属性含义：

　　　https://www.cnblogs.com/kuangke/p/14702399.html (推荐直接看这个文档)

• grid容器【设置display：grid】

1. grid属性：这是集合属性。不用管。
2. grid-template-rows ：100px 100px 100px; // 第一行的高度，第二行的高度，第三行的高度 。。。
3. grid-template-columns ：100px 100px 100px；// 低第一列的宽度，第二列的宽度，第三列的宽度。。。

   // 有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。上面的代码用repeat()改写如下。
   
   .container {
     display: grid;
     grid-template-columns: repeat(3, 33.33%);
     grid-template-rows: repeat(3, 33.33%);
   }

4. grid-template-areas

　　　总结：grid-template-rows、grid-template-columns 两个属性就决定了 网格中有几行几列以及对应的宽高。

css3 新属性

参考：https://www.jianshu.com/p/56b7302d7f7f 或 https://juejin.cn/post/7043577751344775176

1、-webkit-box-reflect：反射

　　镜像复制当前内容，复制出来的内容占据 DOM文档的空间。

2、zoom 和 transform:scale 的区别 ： http://www.zhangxinxu.com/wordpress/2015/11/zoom-transform-scale-diff/

　　　　　　　　scale放大的图片有点类似相对定位，本身大小不变，但是会覆盖下面的元素

3、子网格（Subgrid）布局

4、多列布局（Multi-Column）

5、