flex布局

animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环 animation-direction：动画执行方向

animation-paly-state：动画播放状态 animation-fill-mode：动画填充模式

还有多列布局、媒体查询（@media）、混合模式等等，而CSS3如今有很多是我们日常使用到的，比如我们在处理文字溢出时会使用 text-overflow，比如我们需要文字突破限制12像素就可以使用 transform: scale（0.5）来调

整。

flex布局

弹性布局。可以简便、完整、响应式地实现各种页面布局。为盒模型提供最大的灵活性。

父容器和子容器构成，通过主轴和交叉轴控制子容器排列布局，子元素float、clear和vertical-align属性失效

父容器

flex-direction flex-wrap

flex-flow justify-content

align-items align-content

flex-direction

.container {

flex-direction: row | row-reverse | column | column-reverse;

}

决定主轴方向，子元素的排列方向

flex-wrap

.container {

flex-wrap: nowrap | wrap | wrap-reverse;

}

弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内项目是否可换行。

默认情况是不换行，但这里也不会任由元素直接溢出容器，会涉及到元素的弹性伸缩。

flex-flow

是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

当flex-grow之和小于1时，只能按比例分配部分剩余空间，而不是全部。

.box {

定义了项目在主轴上的对齐方式

.box {

justify-content: flex-start | flex-end | center | space-between | space-around;

}

flex-start（默认值）：左对齐 flex-end：右对齐

center：居中 space-between：两端对齐，项目之间的间隔都相等

space-around：两个项目两侧间隔相等

align-items

.box {

align-items: flex-start | flex-end | center | baseline | stretch;

}

定义项目在交叉轴上如何对齐

flex-start：交叉轴的起点对齐 flex-end：交叉轴的终点对齐

center：交叉轴的中点对齐 baseline: 项目的第一行文字的基线对齐

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

align-content

.box {

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

}

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

flex-start：与交叉轴的起点对齐 flex-end：与交叉轴的终点对齐

center：与交叉轴的中点对齐 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 stretch（默认值）：轴线占满整个交叉轴

子容器

order flex-grow

align-self

order

定义item排列顺序，越小越靠前，默认0

flex-grow

定义项目的放大比例（容器宽度>元素总宽度时如何伸展）

默认为0，即如果存在剩余空间，也不放大。

flex-warp：nowrap；不换行的时候，container宽度不够分时，弹性元素会根据flex-grow来决定。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）

如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

弹性容器的宽度正好等于元素宽度总和，无多余宽度，此时无论flex-grow是什么值都不会生效。

flex-shrink

定义了项目的缩小比例（容器宽度<元素总宽度时如何收缩），默认为1，即如果空间不足，该项目将缩小。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。

如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis

定义分配多余空间前，占据主轴空间默认auto。元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow 和flex-shrink生效前的尺寸

flex:1

等分剩余空间

flex: 1 相当于 flex-grow: 1、flex-shrink: 1 和 flex-basis: 0%。

flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。

优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

flex: 1 = flex: 1 1 0%

flex: 2 = flex: 2 1 0%

flex: auto = flex: 1 1 auto

flex: none = flex: 0 0 auto，常用于固定尺寸不伸缩

aline-self

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

flex-direction:row/column;

align-items:center

//水平局中

flex-direction:row/column;

justify-content:center;

flex: 1 = flex: 1 1 0%

flex: 2 = flex: 2 1 0%

flex: auto = flex: 1 1 auto

flex: none = flex: 0 0 auto，常用于固定尺寸不伸缩

隐藏元素

display:none

不会在页面占据位置渲染树不会包含该渲染对象

不会绑定响应事件会导致浏览器进行重排和重绘

visibility:hidden

占据位置,不更改布局不会响应绑定事件

不会重排但会重绘

opacity:0

元素透明度设置为0 占据位置

能响应绑定事件不能控制子元素展示

不会引发重排，一般会引发重绘

如果利用 animation 动画，对 opacity 做变化（animation会默认触发GPU加速），则只会触发 GPU 层面的 composite，不会触发重绘

设置height width为0

将影响元素盒模型的属性设置为0，若有元素内有子元素或内容，应该设置其overflow:hidden来隐藏其子元素。

元素不可见不占据空间

不响应点击事件