HTML弹性布局、特效

Display:flex;启用弹性布局。

flex-direction: column||row;
flex-direction  flex容器中项目的方向，row横向 column纵向
flex-wrap  wrap换行   nowrap不换行不会缩紧内容    如果宽度变小时，缩紧内容
flex-flow  上面两个的缩写

 justify-content  水平对齐模式

center 居中显示  
 flex-start 左对齐  
 flex-end  右对齐
 space-between 左右分裂 第一个在最左边，最后一个在最右边，其它均分
space-around 等比例均分  按照比例均分

 align-items  垂直对齐模式  

flex-start 顶端对齐  
flex-end  底端对齐  
center 垂直居中对齐 
baseline 如果有文字，使用文字对齐模式，通常用于子项高度不等时              
stretch 高度自动均分

换行产生多行  align-content  
 flex-start 多行顶端对齐`

flex-end  多行底端对齐  
center 多行垂直居中对齐   
space-between 垂直两端对齐
space-around   垂直均分对齐
stretch 高度自动均分对齐

box-shadow 盒子阴影

水平偏移  垂直偏移  模糊度  延展值 颜色 inset（内嵌阴影）
box-shadow:10px 10px 10px ;*/
text-shadow 文本阴影
水平偏移  垂直偏移  模糊度  颜色
text-shadow: 10px 10px 10px;
background:linear-gradient(to 方向,第一颜色，第二颜色... )
background:linear-gradient(to right bottom,#FF0000,#FFFF00,#00FFFF)
放射性渐变  radial-gradient(圆心位置（可以省略的，省略时在正中）,第一颜色，第二颜色..)

圆心位置: circle at left top

 rotate(角度)旋转    角度单位是deg正值是顺时针负值是逆时针

transform: rotate(-180deg);*/
transform-origin 变形的圆心点
skew(角度) 倾斜transform: skew(45deg);*/    百分比  数字   关键词
 透镜深度 perspective: 500px;

多列布局

column-width: 200px;
column-count: 3;

媒体查询

@media screen and (大小) 适配屏幕宽度

@media screen and (max-width: 400px)