整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
者按：在WWDC 2014之前我就打算把这篇文章翻译出来与大家分享；好在WWDC 2014上CSS Shape也露了一脸。快点阅读本文，了解初出茅庐的CSS Shape是何方神圣吧！
方框套方框：这就是目前网页的样子。长久以来，我们努力尝试使用CSS来创建几何形状来突破这种限制。但是这些形状无法影响其包含内容的形状。同样，元素的形状也无法被其他元素所影响。
2012年中旬，由Adobe提出的CSS Shape规范打破了这个限制。该规范的目标是为设计师提供一种新的方式，改变任意复杂形状周围或者内部内容布局。这些事情之情从来没有被实现过，JavaScript也没有。
例如，注意看在下面这个设计中文本环绕圆形图片的样子。没有形状的话，文本变成长方形——抛弃了精致的边缘，这种精致可不是把设计带到了下一个高度。
注意例子中文本是如何环绕圆形的那个碗的。通过CSS Shape，我们可以在网页上创建类似的设计。
接下来我们一起来看看Shape是如何工作，并开始使用它们。
结合其他一些最新的特性，例如Clipping与Masking、CSS Filters和Compositing与Blending，无需借助像Photosho或者InDesign这样 的图像编辑器，CSS Shape允许我们创造更漂亮更精致的设计。
新版的CSS Shape规范也会聚焦形状内部的内容。例如，现在可以很轻松地使用CSS创建一个菱形：只需把元素旋转45度，然后把元素里面的内容旋转回来，相对页面是横向的。但是其形状没法受到其容器菱形的影响，因此还是矩形的。如果CSS Shape的shape-inside属性实现了，我们就可以让内容也是菱形的，要实现下这图这样的布局就没什么不可能了。
很快，CSS Shape将支持定义内部文本的形状，比如这些菱形，与它的容器边缘保持一致，而不溢出或者被截断。
为了在Chrome Canary中使用CSS Shape，你需要开启试验特性标记。如果你不知道怎么打开，可以看看Adobe博客上的这篇参考。
可以使用下面这几个函数来定义形状：
每个形状都由一组坐标定义。有些函数接受坐标点作为参数，另外一些接受偏移量——但是最终它们都把形状当做元素上一系列的点来描绘。在下面的例子中，我们将为大家讲解每个方法所接受的参数。
一个形状还可以通过提取图片的一个Alpha通道来定义。如果把一张图片传递给Shape属性，浏览器就会基于图片的临界值提取形状。形状的定义基于图片上每一个点的Alpha通道是否高于临界值。不过图片必须是CORS compatible的。无论何种原因（比如图片不存在），只要图片不能正常显示，就不会产生形状。
可接受上面这些函数作为值的Shape属性有：
可以把shape-margin和shape-outside属性结合使用，定义形状周围的margin，以此隔开浮动的内容和形状，在形状和内容之间留出更多的空间。与shape-outside和shape-margin对应一样，shape-inside有对应的shape-padding属性，用来添加内间距。
一行代码就可以使用Shape属性和函数来定义一个形状：
.element {
shape-outside: circle; /* content will flow around the circle defined on the element */
}
或者：
.element {
shape-outside: url(path/to/image-with-shape.png);
}
但是。。。
要让这行CSS生效，必须满足两个条件：
看上面函数的定义，形状都是由一组坐标定义的。因为这些点是坐标，所以需要坐标系统，这样浏览器才知道把这些点放在元素的什么位置上。因此，加上下面这段代码上面的例子就可以正常工作。
.element {
float: left;
height: 10em;
width: 15em;
shape-outside: circle;
}
给定固有的维数并不会影响响应性（随后我们进行更深入的探讨）。
既然形状是由一系列带坐标的点定义的，那更改这些点的坐标就可以相应的更改形状。举个例子，下面的六边形是使用polygon这个方法创建的。整个形状由六个点构成。更改黄点的横坐标将会影响产生的形状，应用了此形状元素的内部或者外部的内容布局方式也会受到影响。
如果元素右浮动，且应用了这个形状，当在polygon函数中黄点的横坐标变化的时候，在元素左侧的内容的浮动方式也会改变。
默认把外边界Box作为参考——因此，如果你应用了形状的元素的底部有外边界，则形状会延伸到外边jie上，而不是元素的边框区域。如果你想使用其他Box值，你可以在形状函数之后指定，然后传递给Shape属性。
shape-outside: circle(250px at 50% 50%) padding-box;
上面这条规则中的padding-box关键字，把形状限定在了元素的内边框Box中。circle函数定义了一个环状的形状，包括这个形状的大小和在这个元素上的位置。
使用CSS Shape，让文本环绕圆形的用户头像。文本将不再是长方形的。
使用circle函数给头像添加一个圆形：
<img src="http://api.randomuser.me/0.3.2/portraits/men/7.jpg" alt="profile image" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci?</p>
<p>Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.</p>
你可能会问，“为什么不使用border-radius来做出图片的圆角？”答案就是border-radius无法影响元素周围或者内部的内容的布局。它只能影响元素的边框和背景。背景区域会被裁剪成圆角，但是它功能仅限于此。元素内部的内容任然是矩形的，而且周围的内容还是把元素当做一个矩形的存在——本质上它还是。
我们使用border-radius让图片变圆——我们通常都是这样让图片等其他元素变圆的。图片bian'yuan
img {
float: left;
width: 150px;
height: 150px;
border-radius: 50%;
margin-right: 15px;
}
不添加CSS Shape，文本任然把图片当做矩形的，因此还是围绕成一个矩形，而不是圆的。
在不支持CSS Shape属性的浏览器中，原型图片周围的内容就像环绕在一个不是圆形的图片周围。这就是在较老浏览器中CSS Shape降级的效果。的
为了改变内容布局以适应特定的形状，我们使用Shape属性：
img {
float: left;
width: 150px;
height: 150px;
border-radius: 50%;
shape-outside: circle;
shape-margin: 15px;
}
有了这些代码，文本会看到一个圆的形状在图片上，环绕之，就像第一张截图那样（你可以在这里看到）。在不支持的浏览器中，将降级为第二张图显示的哪样。
你可以像上面那样使用circle函数，也可以传递参数给它。下面是它的语法：
circle=circle( [<shape-radius>]? [at <position>]? )
问号标示这些参数是可选的。省略的参数将会被浏览器使用默认值补全。如果你直接使用circle而未指定圆形的位置，它会定义一个放在元素正中间的圆形。
你可以指定圆形的半径，什么单位都可以（px、em、pt等等）。你甚至可以指定使用closest-side或者furthest-side作为半径，closest-side是默认值，即浏览器会把从中点到最近边的长度作为圆形的半径。furthest-side则是使用中心到最远边的距离。
shape-outside: circle(farthest-side at 25% 25%); /* defines a circle whose radius is half the length of the longest side, positioned at the point of coordinates 25% 25% on the element’s coordinate system*/
shape-inside: circle(250px at 500px 300px); /* defines a circle whose center is positioned at 500px horizontally and 300px vertically, with a radius of 250px */
eclipse函数与circle还是函数是一样，除了接受两个半径参数以外（后者是一个参数列表）——一个是x轴的半径，一个是y轴的——是一直的。
ellipse=ellipse( [<shape-radius>{2}]? [at <position>]? )
与circle和eclipse没有直接的关系，inset函数再元素内部创建一个矩形。既然元素本身就是矩形的，我们当然不需要更多的矩形。inset实际上可以帮助我们在元素内部创建一个带有圆角的矩形。文本内容可以环绕在圆角周围。
inset函数接受1到4个值指定从参考Box边缘向内的距离。这可以控制这个矩形在元素内部的位置。这个函数还接受一个可选参数，设置内部矩形的圆角。且圆角的设置于border-radius的方法一致，使用一到四个值，于关键字round结合在一起。
inset=inset( offset{1,4} [round <border-radius>]? )
在一个浮动的元素中创建一个带圆角的矩形：
.element {
float: left;
width: 250px;
height: 150px;
shape-outside: inset(0px round 100px) border-box;
}
在这里查看实际的例子。
最后一个Shape函数是polygon，它可以是用任意数量的点来定义更加复杂的形状。这个函数接受一系列的坐标，每个坐标定义多边形的一个边角，合在一起组成整个图形。
在下面的例子中，一张右浮动的图片使用viewport单位，占满了整个屏幕。我们希望左侧的文本可以沿着图片内部的沙漏浮动，因此，我们使用polygon函数在图片上定义了一个不规则的的图形。
图片的CSS：
img.right {
float: right;
height: 100vh;
width: calc(100vh + 100vh/4);
shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);
}
你可以使用长度单位或者百分比来定义边角的坐标，我使用的是百分比。
这段代码就是显示出图片的效果，你可以看到，Shape函数无法影响形状外的图片。事实上，一个形状除了影响内容的浮动之外无法对元素造成其他任何影响，不管这个元素是图片还是容器或者其他的什么。
为了让我们创建的多边形更有存在感，我们需要把形状之外的图片抠掉。这就需要CSS Masking模块的clip-path属性来帮忙了。
clip-path属性接受同样的Shape函数和参数座位形状属性。如果我们把传递给shape-outside的多边形传递给clip-path属性，它会把形状之外的图片全部抠掉。
img.right {
float: right;
height: 100vh;
width: calc(100vh + 100vh/4);
shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);
/* clip the image to the defined shape */
clip-path: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);
}
看效果：
目前，使用clip-path还需要使用前缀，这个例子clip-path使用了-webkit-前缀，因此可以在Chrome中工作，你点击查看demo。
clip-path属性确实是Shape属性的好伙伴，因为它可以帮助凸显被创建的形状，抠掉元素上所有不再形状内部的部分。你自然会经常发现把clip-path个Shape属性结合使用。
polygon函数还接受一个可以可选的参数fill，有两个值，nonzero和even odd。指明如何对待多边形自己内部的交错区域。更多信息可以查看SVG fill-rule。
像素的alpha通道的值是否超过某个临界值，这是定义形状的依据。默认的临界值是0.0（完全透明），你也可以通过shape-image-threshold属性来定义。因此，所有不透明的像素点都是形状的一部分。
有可能，新版的CSS Shape不但可以使用alpha通道，还可以使用亮度。果真如此的话，shape-image-threhold将被扩展，支持亮度或者alpha通道，基于不同状态间的切换。
我们将使用下面这张图，定义元素的形状，让文本环绕之：
使用shape-outside属性，传递一个url值，指向我们想要的图片。
.leaf-shaped-element {
float: left;
width: 400px;
height: 400px;
shape-outside: url(leaf.png);
shape-margin: 15px;
shape-image-threshold: 0.5;
background: #009966 url(path/to/background-image.jpg);
mask-image: url(leaf.png);
}
当然，如果元素有背景图片的话，需要把形状之外的部分去掉。不过clip-path无法接受一张带透明度的图片座位参数，我们 可以使用Masking Module的mask-image（需要对应的前缀）属性来实现。看看效果：
如果你需要创建一个复杂的形状，推荐你使用图片来定义。你可以通过Photoshop来定义alpha通道，比起手动指定定点方便多了。
还有，如果你元素上又多个浮动或者多个被排除的区域，你更愿意使用图片而不是形状。因为，至少是现在，你无法在一个元素上定义多个形状。但是如果图片包含多个区域，浏览器可以把这些区域提取出来并使用之。
不过shape-inside还不是响应式的，原因是它被推迟到了Module Level 2中。当前版本中不尽人意的地方将在下一版本中解决。
Adobe Web平台开发组开发出了一个更高级，交互式的Shape工具。这个工具最近作为Brackets编辑器的一个插件公布出来，Brackets编辑器是Adobe团队打造的一个免费编辑器。它允许你直接在浏览器中可视化地编辑图形，还包含一个预览版的功能——在你在页面上编辑图形的同时，更新编辑器中的样式表。这给你提供了直接视觉反馈，可以让你看到你的形状是如何与页面上的其他元素交互的。
使用Brackets的预览模式，在右边的浏览器中编辑多边形。截图由Razvan Caliman提供。
这个工具不可或缺，因为它大大简化了形状的创建、编辑和调试。 Razvan Caliman再Brackets的博客上发布了一篇文章，说明如何再Brackets中使用Shape编辑器。
将来，CSS Exclusion允许我们像引文一样让文本环绕着形状，如这张杂志的布局所示。引文甚至可以是圆形的，文本也可以很好的环绕在它周围。图片来自Justin Thomas Kay。
类似的布局，具有形状的元素绝对定位在文本在中间——四面都有文本环绕——将来也没什么不可能。
现在你就可以使用CSS Shape，作为渐进增强的一部分，确保在不支持的浏览器中可以优雅的降级。我最近开始把它们用在我自己的网站上，降级很”正常”。对于更加复杂的设计，你可以使用脚本来检测浏览器是否支持Shape，提供降级方案。你也可以使用这段脚本扩展Modernizr的测试集，来测试浏览器是否支持shape-outside，也可以直接下载一份自定义的包含了这个测试的版本。
CSS Shape填平了印刷排版和Web设计之间的沟壑。本文中的示例都很简单，不过你应该学到的这些基础，有助于你实现像杂志或者海报一样复杂的设计——无需担心你还需要针对屏幕重新设计。无论你在寻找什么——从非矩形布局到Shape动画——马上开始实验吧。
原文：CSS Shapes 101 · An A List Apart Article
— 完 —
作步骤
1、打开一篇具有原始数据的WPS工作表，在功能区选择“插入”选项卡，单击“形状”图标，在出现的下拉按钮中选择插入一个形状，小编在这里插入“菱形”；
2、选中插入的“菱形”，然后单击鼠标右键，在弹出的快捷菜单中选择“设置对象格式”命令；
3、在“设置对象格式”的对话框中我们将填充颜色设置为“无填充颜色”然后单击“确定”；
4、此时你会看到我们插入的图形已经变成了透明色，然后我们选中整个表格，同时按住键盘上的“Ctrl+c"进行剪切；
5、然后把剪切的表格通过键盘上的“Ctrl+v”粘贴到我们的图形里边，然后选择插入的图形，单击“效果设置”选项卡，选择“三维效果”中的第二个效果样式；
6、返回到工作表中就可以看到我们设置的三维效果的表框了；
提示：在把表格粘贴到我们的图形的过程中的时候，有时候需要我们选中图形进行调整，把它调到适合整个表格的最佳效果，另外我们还可以在“效果设置”选项卡中通过“颜色”选项组来进行图形的颜色设置。
天我们学习的内容有：过渡，动画，转换，伸缩盒子。
可以说今天学习的内容都是重量级的大佬，学好了，使用css3做出酷炫的效果 So Easy！~~
1.过渡
在css3中，有一个属性可以设置过渡效果。
它就是transition，所谓的过渡效果，指的就是以动画的形式慢慢演化样式属性变化的过程。
A.案例：通过transition设置焦点过渡效果
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;margin:200px;background: url(girl.jpg);border-radius:50%;transition:all 1s linear 0.3s;cursor: pointer;}div:hover{box-shadow: 0px 0px 20px blue;}</style></head><body><div></div></body></html>
注意页面中的代码：
第一，我们给div添加了一个hover伪类样式，当我们鼠标悬停在div上方的时候，会给div盒子添加一个蓝色的盒子阴影。
第二，我们给div盒子添加了一个transition样式，设置的值为：all 1s linear 0.3s;
这四个数据分别对应
transition-property(需要过渡的属性)：如果设置为all表示所有样式属性都需要过渡。
transition-duration(过渡的时间):以秒作为单位，设置过渡的时间
transition-timing-function(过渡的方式):常用的有linear(匀速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等
transition-delay(延迟的时间):以秒作为单位进行延迟，延迟之后开始进行过渡效果。
所以，我们通过transition这个复合属性设置的过渡效果为：
all:需要过渡所有的属性
1s:过渡的时间为1秒
linear:匀速过渡
0.3s:在延迟0.3秒之后开始过渡动画。
如果大家理解了上面的描述，那么也就不难理解咱们鼠标放到div上之后，为啥会慢慢出现蓝色的光晕了，就是因为咱们添加了过渡，所以，慢慢的就会给盒子添加阴影效果。
2.动画：
在学习完了过渡之后，发现咱们可以使用transition去以动画的形式展示样式的改变以及变化的过程，这可以帮助我们来实现一些过渡的动画。
但是，有的时候，我们的需求会更加的复杂，要求会更加的多变，那么，transition可能就无法满足我们的需要了，我们需要有更加炫酷，复杂的效果呈现。
那么，动画animation就可以满足我们的需要。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>@keyframes moveAndChange{0%{left:0px;top:0px;}25%{left:200px;top:200px;background:green;border-radius: 0;}50%{left:400px;top:200px;background:blue;border-radius: 50%;}75%{left:400px;top:0px;background:#ccc;border-radius: 0;}100%{left:0px;top:0px;background:red;border-radius: 50%;}}div{margin:200px;width: 200px;height: 200px;position: absolute;background:red;border-radius:50%;animation: moveAndChange 5s linear 0.5s infinite normal;}</style></head><body><div></div></body></html>
代码效果如下：
同样，让我们来关注编写的代码：
1.在样式中，首先我们使用@keyframes 来定义了一个复杂的动画，在css3中，新增了@keyframes可以来帮助我们添加动画。代码如下：
/*动画的名字叫做moveAndChange*/
@keyframes moveAndChange{
/*动画最初的时候，将left设置为0px，top设置为0px*/
0%{
left:0px;
top:0px;
}
/*当动画进行到25%的时候，使用动画将left过渡到200px，top过渡到200px，
背景颜色过渡为绿色，圆角过渡为0(无圆角)*/
25%{
left:200px;
top:200px;
background:green;
border-radius: 0;
}
/*当动画进行到50%的时候，使用动画将left过渡到400px，top过渡到200px，
背景颜色过渡为蓝色，圆角过渡为50%(正圆)*/
50%{
left:400px;
top:200px;
background:blue;
border-radius: 50%;
}
/*当动画进行到75%的时候，使用动画将left过渡到400px，top过渡到0，
背景颜色过渡为灰色，圆角过渡为0(无圆角)*/
75%{
left:400px;
top:0px;
background:#ccc;
border-radius: 0;
}
/*当动画结束的时候，使用动画将left过渡到0x，top过渡到0px，
背景颜色过渡为红色，圆角过渡为50%(正圆)*/
100%{
left:0px;
top:0px;
background:red;
border-radius: 50%;
}
}
这是一个比较复杂的动画效果，可以发现，它通过百分比的形式将一个完整的动画拆分成了5个部分，每个部分都有不同的样式效果，而当我们采用该动画的元素就会按照设置的顺序和样式效果进行动画的过渡和展示。
2.上面我们只是通过@keyframes创建了一个动画，我们还需要通过特定的语法来使用这个动画。
就是下面这句代码了：
animation: moveAndChange 5s linear 0.5s infinite normal;
它是一个复合属性，设置了6个值，分别对应：
animation-name(设置动画的名称)：用来设置动画的名字，我们这里写的是moveAndChange ，也就是说我们就是要使用我们刚刚创建的动画。
animation-duration(设置整个动画的时间):以秒作为单位，我们这里写的是5s，表示整个动画的时间为5秒
animation-timing-function(设置播放动画的方式)：播放动画的方式，常用的有linear(匀速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等，我们使用的是linear匀速播放动画。
animation-delay(设置动画的延迟):以秒作为单位，我们写的是0.5s，表示延迟0.5秒之后开始播放动画。
animation-iteration-count(设置动画播放的次数):播放动画的次数，我们这里写的是infinite ，表示动画将会被播放无限次，如果写数字，那么就会播放数字对应的次数。
animation-direction(设置是否反向播放动画)：我们写的是normal，表示正常播放动画，如果写的是
alternate则表示要反向播放动画，大家也可以自己试一试这个效果。
最终，我们通过@keyframes创建动画，通过animation设置动画，成功完成了这个复杂的动画效果。
3.转换
在css3中，我们通过transform属性可以设置元素的转换效果，具体的效果如下：
A.平移
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body{background:pink;}div{width: 200px;height: 200px;position: absolute;background: green;left:0px;top:0px;transform: translate(300px,300px);}</style></head><body><div></div></body></html>
代码效果如下：
如上图所示，本来div盒子的位置是left:0,top:0;
但是我们通过transform: translate(300px,300px);将盒子进行了偏移，所以，盒子的位置发生了改变。
B.旋转
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: rotate(45deg);}</style></head><body><div></div></body></html>
代码效果如下：
如上图所示，本来div盒子应该是四四方方的。
但是，经过我们的代码transform: rotate(45deg); //deg为单位，表示度数。
进行了45度的旋转之后，呈现出来的就是一个菱形的盒子了，旋转的正方向为顺时针，负方向为逆时针。
C.缩放
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: scale(0.5,0.25);}</style></head><body><div></div></body></html>
代码效果如下：
如上图所示，本来盒子的宽高为200*200,而我们通过transform: scale(0.5,0.25);进行的缩放
scale的第一个参数为0.5,表示横向缩小为0.5倍
scale的第二个参数为0.25，表示纵向缩小为0.25倍。
scale的参数如果为1，则表示不进行任何缩放，小于1就是做缩小，而大于1表示做放大。
小结：transform转换中其实还包含了skew(倾斜)，matrix(矩阵转换)，相对来说用到的不是特别多，所以在本文中我们便不再做介绍。
4.flex布局
Flex布局，可以简便、完整、响应式地实现各种页面布局。
Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: flex-start}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
代码效果如下：
如图所示，咱们通过display:flex将.parent元素设置为了flex盒子，那么子元素将会按照justify-content设置的方式进行元素的排列，目前看来，和我们没有设置flex盒子的效果是一致的。
接下来我们更改一下，将justify-content设置为flex-end，效果如下图所示：
所以我们就应该发现，flex-start是让所有的子元素从父元素的左侧开始排列
而flex-end是让所有的子元素从元素的右侧开始排列。
我们再来更改一下，将justify-content设置为center，效果如下图所示：
更厉害了，子元素在父盒子的中央位置排列显示了。
然后，我们再将justify-content设置为space-around，效果如下图所示：
它是平均分配的形式为每一个子元素设置了间距，但是看起来有点变扭。
所以我们推荐将justify-content设置为space-between，效果如下图：
我们还可以通过flex-wrap来设置子元素是否换行显示，以及flex-direction设置子元素排列的顺序。
这两个属性可以设置的值如下：
flex-wrap: nowrap;//不换行，会自动收缩
flex-wrap: warp;//换行，会自动收缩
flex-wrap: warp-reverse;//反转，从默认的从上到下排列反转为从下到上。
flex-direction:row; //从左至右一行一行进行子元素的排列
flex-direction:column; //从上到下一列一列进行子元素的排列
flex-direction:row-reverse; //从右至左一行一行进行子元素的排列
flex-direction:column-reverse; //从下到上一列一列进行子元素的排列
案例代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row-reverse;}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>
我们设置了flex-wrap: nowrap;（不换行，压缩所有的子元素在一行中显示），以及flex-direction: row-reverse;（反向排列）
代码效果如下：
如果设置为flex-wrap: warp（换行显示无法在一行显示的子元素），则效果如下：
如果将flex-direction: column;,则会纵向排列元素，效果如下图：
除了上面的这些给伸缩盒子父元素设置的样式之外，我们还可以可以伸缩盒子的子元素设置flex属性，用来设置平均分配整个父盒子的空间。
代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div{flex:1;width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
效果如下：
如上图所示，每个盒子平均分配了父盒子的空间，原本宽度为20%，现在被拉伸了。
除此之外，咱们还可以使用flex属性进行进一步的设置，代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div:nth-of-type(1){flex:1;border:1px solid #ccc;background:red;}.parent div:nth-of-type(2){flex:2;border:1px solid #ccc;background:green;}.parent div:nth-of-type(3){flex:2;border:1px solid #ccc;background:blue;}.parent div:nth-of-type(4){flex:1;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
效果如下图：
我们分别给四个子盒子设置了flex:1 , flex:2, flex:2 ,flex:1.
这是什么意思呢？
四个flex加起来一共是6.那么第一个盒子就占据整个父盒子的1/6宽度。
同理，另外三个盒子分别占据2/6,2/6,1/6的宽度，所以就形成了我们现在看到的效果。
原文来源于：黑马程序员社区
学习资源：
想学习css，可以关注：黑马程序员头条号，后台回复：css
*请认真填写需求信息，我们会在24小时内与您取得联系。
