flex布局+近期一些学习

flex参考页面：https://www.jianshu.com/p/d7efdac6a2e5

备注1：官方使用手册才是王道，本页面东西有黏贴参考页面，只为总结自己用到过的，具体查看参考页面。

备注2：本人用flex最多的情况是一个div里面包裹img或者div等情况，在父div里面加上语句

display: flex;
align-items: center;
justify-content:center;

/*垂直居中是align-items*/

/*justify-content是水平居中*/

即可实现子元素居中的操作

 

flexDirection: row | row-reverse | column | column-reverse;
用来声明主轴的方向和在主轴上排列的方向

• row（默认）：在ltr排版方式下从左向右排列；在rtl排版方式下从右向左排列。
• row-reverse：与row排列方向相反，在ltr排版方式下从右向左排列；在rtl排版方式下从左向右排列。
• column：类似于row但是是顶部到底部
• column-reverse：类似于row-reverse但是是底部到顶部

justifyContent: flex-start | flex-end | center | space-between | space-around;
主轴方向上的对齐方式

• flex-start（默认）：子项会从一行的起始处开始放置
• flex-end：子项会从一行的结尾处开始放置
• center：子项会集中在一行的中央
• space-between：子项会被均匀的分布在行内；首项放置在一行的开始，尾项放置在一行的结束
• space-around：子项会均匀的按照同等距离分布在一行。需要注意的是，在视觉上会觉得并不等距，因为所有子项在两侧都需要加上同等的空间。首项会与容器开始边缘有一个单位空间的距离，但是与下一项会有两个单位空间的距离，因为下一项也有它自己的适配空间。

alignItems: flex-start | flex-end | center | baseline | stretch;
侧轴方向的对齐方式

• flex-start：弹性项在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
• flex-end：弹性项在侧轴起点边的外边距紧靠改行在侧轴结尾的边。
• center：弹性项会被放置在侧轴的中央。
• baseline：弹性项会根据他们的基线对齐。
• stretch（默认）：在侧轴方向上拉伸弹性项以致填充满弹性容器。（任遵从min-width/max-width）

其他的学习：

1.关于setInterval
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用
setInterval(function(){ alert("Hello"); }, 3000);
setInterval('alert("Hello");', 3000);

2.floor() 方法可对一个数进行下舍入。
Math.floor(x)：小于等于 x，且与 x 最接近的整数。

3.关于栅格系统：
col-md-1：position:relative;min-height:1px;padding-right:15px;padding-left:15px

4.设置span里面文字的间距：
letter-spacing:2px

5.在rgb里面设置背景透明在最后一个参数设置：rgb(131,131,131，0.6)