flex布局
1）作用：
通过给父盒子添加display:flex;属性，来控制子盒子的位置和排列方式
父元素：容器。
子元素：项目。
tips：父盒子添加flex布局后，子元素的float、clear和vertical-align属性失效
2）父项属性
①flex-direction：row(默认) | row-reverse | column | column-reverse
作用：决定主轴的方向（排列方向）
默认2个轴（水平、垂直方向）
元素跟着主轴来排列
②justify-content：flex-start(默认) | flex-end | center | space-around | space-between
作用：项目在主轴上的对齐方式
tips：使用之前一定要确定主轴在哪个方向
③flex-wrap: no-wrap(默认) | wrap
作用：主轴排列不下时子元素是否换行
默认的子元素不换行，如果装不开，会缩小元素的宽度，放到父元素里面
④align-items: center | stretch(拉伸) | flex-start | flex-end
作用：设置单行子元素在侧轴的排列方式
⑤align-content: 值与justify-content一样
作用：设置多行子元素在侧轴的排列方式
⑥flex-flow: column wrap
作用：flex-direction和flex-wrap的复合属性。
3）子项属性
控制子元素本身的缩放
① ※flex：份数或 百分比(相对父元素)
作用：放大当前元素，设置当前元素占据剩余空间的比例值
计算：
当前父元素中，所有兄弟元素flex值得和（即总份数）
如果没有设置flex，则默认为0（即子元素不会去占据剩余空间）
控制子元素的排列方式
② align-self：
作用：控制某一个子项在侧轴的排列方式
③ order：
作用：数值越小，排列越靠前，默认值为0
H5携程网
文字阴影：text-shadow
背景渐变：background: -webkit-linear-gradient(方位名词，颜色1，颜色2)
背景渐变必须添加浏览器私有前缀
起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是 top
、
|
|
收藏
淘帖
踩
