四、CSS3的新增属性

CSS3 边框

• border-radius 属性被用于创建圆角：
  语法

border-radius: 1-4 length|% / 1-4 length|%;

使用规则：
1、四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
2、三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
3、两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
4、一个值： 四个圆角值相同
创建椭圆边角:

#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

• box-shadow 属性被用来添加盒子阴影:

 box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
实例：给div添加盒阴影

div
{
	box-shadow: 10px 10px 5px #888888;
}

• border-image 属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像：
  语法：

border-image: source slice width outset repeat|initial|inherit;

source 用于指定要用于绘制边框的图像的位置
slice 图像边界向内偏移
width 图像边界的宽度
outset 用于指定在边框外部绘制 border-image-area 的量
repeat 用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。
在 div 中使用图片创建边框，注意浏览器兼容问题

div
{
	border-image:url(border.png) 30 30 round;
	-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
	-o-border-image:url(border.png) 30 30 round; /* Opera */
}

CSS3背景属性

• background-clip 规定背景的绘制区域。
  
  border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。
  padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
  content-box 背景绘制在内容方框内（剪切成内容方框）。
• background-origin 规定背景图片的定位区域。
  background-origin的属性值同 background-clip的属性值
• background-size 规定背景图片的尺寸。
  == 语法==

background-size: length|percentage|cover|contain;

length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

CSS3 渐变（Gradients）

线性渐变

创建一个线性渐变，至少要定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction 用角度值指定渐变的方向（或角度）如：to bottom、to top、to right、to left、to bottom right等等。
color-stop1, color-stop2,… 用于指定渐变的起止颜色。

• 线性渐变 - 从上到下（默认情况下）
  下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

• 线性渐变 - 从左到右
  下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：

#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

• 线性渐变 - 对角
  可以通过指定水平和垂直的起始位置来制作一个对角渐变。
  下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：

#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

• 使用角度的线性渐变
  如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。
  语法

background-image: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，按顺时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

但是很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

• 使用多种颜色节点的线性渐变

#grad {
  /* 标准的语法 */
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

运行效果：

• 使用透明度的线性渐变
  使用 rgba() 函数来定义颜色结点，可以给渐变添加透明度，rgba 括号中前 3 个数字代表着 red green blue 三种颜色的 rgb 值（0-255），最后一个是设定这个颜色的透明度即 alpha 值。范围从 0 到 1，越接近 1，代表透明度越低。
  下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

• 重复的线性渐变
  repeating-linear-gradient() 函数用于重复线性渐变：

径向渐变

径向渐变由它的中心定义。
为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

shape 确定圆的类型:
1、ellipse (默认): 指定椭圆形的径向渐变。
2、circle ：指定圆形的径向渐变
size 定义渐变的大小
1、farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
2、closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
3、closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
4、farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position 定义渐变的位置
1、center（默认）：设置中间为径向渐变圆心的纵坐标值。
2、top：设置顶部为径向渐变圆心的纵坐标值。
3、bottom：设置底部为径向渐变圆心的纵坐标值。
start-color, …, last-color 用于指定渐变的起止颜色。

• 颜色结点均匀分布的径向渐变：

#grad {
  background-image: radial-gradient(red, yellow, green);
}

• 颜色结点不均匀分布的径向渐变：

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

• 重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

CSS3 文本效果

• text-shadow 向文本添加阴影。

text-shadow: h-shadow v-shadow blur color;

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

• text-overflow 规定当文本溢出包含元素时发生的事情。

text-overflow: clip|ellipsis|string;

clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。

• word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。

 word-wrap: normal|break-word;

normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。

• word-break 规定非中日韩文本的换行规则。

word-break: normal|break-all|keep-all;

normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
虽然是CSS3新增的属性，但是任何主流浏览器都不支持一下属性：text-outline、text-wrap、hanging-punctuation、punctuation-trim、text-emphasis属性。

• hanging-punctuation 规定标点字符是否位于线框之外。
• punctuation-trim 规定是否对标点字符进行修剪。
• text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
• text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
• text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。
• text-outline 规定文本的轮廓。
• text-wrap 规定文本的换行规则。

CSS3字体

下表列出了所有的字体描述和里面的@font-face规则定义：

CSS3的转换属性

1、transform 向元素应用 2D 或 3D 转换，这个属性允许你将元素旋转，缩放，移动，倾斜等
语法：

transform: none|transform-functions;
 -ms-transform: none|transform-functions;/* IE 9 */
    -webkit-transform: none|transform-functions; /* Safari and Chrome */

• none 定义不进行转换。
• matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵
• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
• translate(x,y) 定义 2D 转换。
• translate3d(x,y,z) 定义 3D 转换。
• scale(x[,y]?) 定义 2D 缩放转换。
• scale3d(x,y,z) 定义 3D 缩放转换。
• rotate(angle) 定义 2D 旋转，在参数中规定角度。
• rotate3d(x,y,z,angle) 定义 3D 旋转。
• skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
• perspective(n) 为 3D 转换元素定义透视视图。
  2、transform-origin 允许你改变被转换元素的位置，2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。
  语法：

transform-origin: x-axis y-axis z-axis;
-webkit-transform-origin:x-axis y-axis z-axis; /* Safari and Chrome */

3、transform-style 规定被嵌套元素如何在 3D 空间中显示。
语法：

transform-style: flat|preserve-3d;
-webkit-transform-style: flat|preserve-3d; /* Safari and Chrome */

• flat 表示所有子元素在2D平面呈现。
• preserve-3d 表示所有子元素在3D空间中呈现。

4、perspective 规定 3D 元素的透视效果，只影响 3D 转换元素。
语法：

perspective: number|none;
-webkit-perspective: number|none; /* Safari and Chrome */

• number 元素距离视图的距离，以像素计。
• none 默认值。与 0 相同。不设置透视。
  5、perspective-origin 定义 3D 元素所基于的 X 轴和 Y 轴，规定 3D 元素的底部位置。
  语法：

perspective-origin: x-axis y-axis;
-webkit-perspective-origin: x-axis y-axis; /* Safari and Chrome */

6、backface-visibility 定义元素在不面对屏幕时是否可见，如果在旋转元素不希望看到其背面时，该属性很有用。
语法：

backface-visibility: visible|hidden;
-webkit-backface-visibility: visible|hidden; /* Chrome 、Safari */
-moz-backface-visibility: visible|hidden;/* Firefox */
-ms-backface-visibility: visible|hidden; /* Internet Explorer */

• visible 背面是可见的。
• hidden 背面是不可见的。

CSS3 2D 转换

• translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
  实例：从左边元素移动50个像素，并从顶部移动100像素

div
{
	transform: translate(50px,100px);
	-ms-transform: translate(50px,100px); /* IE 9 */
	-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

• rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
  实例：元素顺时针旋转30度。

div
{
	transform: rotate(30deg);
	-ms-transform: rotate(30deg); /* IE 9 */
	-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

• scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
  实例; 宽度变为原来的2倍，高度变为原来的3倍。

-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */

• skew() 方法，定义 2D 倾斜转换，沿着 X 和 Y 轴。

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
实例：元素在X轴和Y轴上倾斜20度30度。

div
{
	transform: skew(30deg,20deg);
	-ms-transform: skew(30deg,20deg); /* IE 9 */
	-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

• matrix()方法将所有2D变换的方法合并成一个方法。
  matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
  1、实现平移：

matrix(1,0,0,1,0,0);

2、实现旋转：

matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0) === rotate(θ + “deg”)

3、实现缩放：

matrix(sx, 0, 0, sy, 0, 0) === scale(sx, sy)

4、实现斜切：

matrix(1, tan(θy), tan(θx), 1, 0, 0) === skew(θx + “deg”, θy + “deg”)

CSS3 3D转换

• 3D 转换方法
  1、matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
  2、translate3d(x,y,z) 定义 3D 转化。
  3、scale3d(x,y,z) 定义 3D 缩放转换。
  4、rotate3d(x,y,z,angle) 定义 3D 旋转。
  5、perspective(n) 定义 3D 转换元素的透视视图。

CSS3 过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
要实现这一点，必须规定两项内容：指定要添加效果的CSS属性、指定效果的持续时间。

• transition 属性设置元素当过渡效果，四个简写属性为：
  transition-property 指定CSS属性的name，transition效果
  语法

transition-property: none|all| property;

1、none 没有属性会获得过渡效果。
2、all 所有属性都将获得过渡效果。
3、property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

transition-duration 指定transition效果需要多少秒或毫秒才能完成

transition-duration: time;

1、time 规定完成过渡效果需要花费的时间（以秒或毫秒计）。 默认值是 0，意味着不会有效果。

transition-timing-function 指定transition效果的转速曲线
语法：

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

1、linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
2、ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
3、ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
4、ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
5、ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
6、cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-delay 定义transition效果开始的时候
语法：

transition-delay: time;

time 指定秒或毫秒数之前要等待切换效果开始

CSS3 动画

• CSS3动画是什么？
  动画是使元素从一种样式逐渐变化为另一种样式的效果。
  您可以改变任意多的样式任意多的次数。
  请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
  0% 是动画的开始，100% 是动画的完成。
  为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
• CSS3的动画属性
  1、@keyframes 规则
  语法

@keyframes animationname {keyframes-selector {css-styles;}}

实例：许多关键帧选择器中添加一个动画：

@keyframes mymove
{
	0%   {top:0px;}
	25%  {top:200px;}
	50%  {top:100px;}
	75%  {top:200px;}
	100% {top:0px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
	0%   {top:0px;}
	25%  {top:200px;}
	50%  {top:100px;}
	75%  {top:200px;}
	100% {top:0px;}
}

2、animation（动画） 属性
语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
-webkit-animation: name duration timing-function delay iteration-count direction fill-mode play-state;/* Safari 和 Chrome */

• animation-name 指定要绑定到选择器的关键帧的名称
• animation-duration 动画指定需要多少秒或毫秒完成
  
• animation-timing-function 设置动画将如何完成一个周期
  
• animation-delay 设置动画在启动前的延迟间隔。
  
• animation-iteration-count 定义动画的播放次数。
  
• animation-direction 指定是否应该轮流反向播放动画。
  
• animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
  
• animation-play-state 指定动画是否正在运行或已暂停。
  
• initial 设置属性为其默认值。
• inherit 从父元素继承属性。

CSS3 多列属性

• column-count 指定元素应该被分割的列数。
  
• column-fill 指定如何填充列
  
• column-gap 指定列与列之间的间隙
  
• column-rule 所有 column-rule-* 属性的简写
  语法

column-rule: column-rule-width column-rule-style column-rule-color;

• column-rule-color 指定两列间边框的颜色
• column-rule-style 指定两列间边框的样式
  
• column-rule-width 指定两列间边框的厚度
  
• column-span 指定元素要跨越多少列
  
• column-width 指定列的宽度
  
• columns 设置 column-width 和 column-count 的简写
  语法：

columns: column-width column-count;

CSS3用户界面特性

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。

• resize属性指定一个元素是否是由用户调整大小的。
  注意：resize属性适用于计算其他元素的溢出值是不是"visible"。
  
• box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。
  
• outline-offset属性设置轮廓框架在 border 边缘外的偏移
  Outlines在两个方面不同于边框：
  Outlines 不占用空间、可以是非矩形
  

CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

• CSS3 弹性盒子内容
  弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
  弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
  弹性容器内包含了一个或多个弹性子元素。
  注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
  弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
• flex-direction 属性指定了弹性子元素在父容器中的位置。
  flex-direction的值有:
  1、row：横向从左到右排列（左对齐），默认的排列方式。2、row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
  3、column：纵向排列。
  4、column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
• justify-conten属性，应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
  justify-content 语法如下：

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

各个值解析:
1、flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
2、flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
3、center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
4、space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
5、space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
各个值的运行效果如下：

• align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
  语法：

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

各个值解析:
1、flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
2、lex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
3、center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
4、baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
5、stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

• flex-wrap 属性用于指定弹性盒子的子元素换行方式。
  语法：

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

各个值解析:
1、nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
2、wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
3、wrap-reverse -反转 wrap 排列。

• align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
  语法：

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

各个值解析:
1、stretch - 默认。各行将会伸展以占用剩余的空间。
2、flex-start - 各行向弹性盒容器的起始位置堆叠。
3、flex-end - 各行向弹性盒容器的结束位置堆叠。
4、center -各行向弹性盒容器的中间位置堆叠。
5、space-between -各行在弹性盒容器中平均分布。
6、space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

CSS3弹性子元素属性

• order 属性设置弹性容器内弹性子元素的属性:
  各个值解析:
  <integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值。
• align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
  语法

align-self: auto | flex-start | flex-end | center | baseline | stretch

各个值解析:
1、auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
2、flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
3、flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
4、center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
5、baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
6、stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

• flex属性用于指定弹性子元素如何分配空间。
  语法

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

各个值解析:
1、auto: 计算值为 1 1 auto
2、initial: 计算值为 0 1 auto
3、none：计算值为 0 0 auto
4、inherit：从父元素继承
5、[ flex-grow ]：定义弹性盒子元素的扩展比率。
6、[ flex-shrink ]：定义弹性盒子元素的收缩比率。
7、[ flex-basis ]：定义弹性盒子元素的默认基准值。