《HTML第6章CSS3新增属性课件》由会员分享，可在线阅读，更多相关《HTML第6章CSS3新增属性课件（70页珍藏版）》请在金锄头文库上搜索。
1、CSS3新增属性新增属性HTML5课程目录Transition过渡过渡Border6Filter124Animation 动画动画Transform2D/3D3Flex57textBorderv向 div 元素添加圆角边框：border-radiusborder-bottom-left-radiusborder-bottom-right-radiusborder-top-left-radiusborder-top-right-radius举例（border-radius）divborder:2pxsolid;border-radius:25px;box-shadowv为div 元素添加一个或多
2、个阴影的边框：box-shadow 举例（box-shadow）divbox-shadow:10px10px5px#888888;值描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊距离。border-imagev将图片规定为包围 div 元素的边框：border-image-outset border-image-repeatborder-image-slice border-image-sourceborder-image-width举例（border-image）border-imagev将图片规定为包围 div 元素的
3、边框：border-image-source 用在边框的图片的路径border-image-slice 图片边框向内偏移。border-image-width 图片边框的宽度。border-image-outset 边框图像区域超出边框的量。border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 border-image举例（border-image）div-webkit-border-image:url(border.png)3030round;/*Safari5*/-o-border-image:url(bord
4、er.png)3030round;/*Opera*/border-image:url(border.png)3030round;Textv文本溢出处理：white-space：规定段落中的文本不进行换行举例（white-space）pwhite-space:nowrap;值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。Textv文本溢出处理：text-overflow
5、:当文本溢出包含元素时发生的事情举例（text-overflow）div.testtext-overflow:ellipsis;值描述clip修剪文本。ellipsis显示省略符号来代表被修剪的文本。string使用给定的字符串来代表被修剪的文本。text-shadowv文本阴影：text-shadow举例（text-shadow）h1text-shadow:5px5px5px#FF0000;值描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊的距离。color可选。阴影的颜色。参阅CSS 颜色值。filterv定义了元素(通
6、常是)的可视效果(例如：模糊与饱和度)filter:none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();grayscalegrayscale灰度灰度opacityopacity透明度透明度sepiasepia褐色褐色brightnessbrightness亮度亮度saturatesaturate饱和度饱和度contrastcontrast对比度对比度hue-rotatehue-rotate色相旋转色相旋转 bl
7、urblur模糊模糊invertinvert反色反色Drop-shadowDrop-shadow阴影阴影filter-grayscalevgrayscalegrayscale灰度灰度#romance-webkit-filter:grayscale(100%);/*Chrome,Safari,Opera*/filter:grayscale(100%);举例（filter-grayscale）blurvblurblur模糊模糊v图片使用高斯模糊效果#romance-webkit-filter:blur(5px);/*Chrome,Safari,Opera*/filter:blur(5px);举例（
8、filter-blur）brightnessvbrightnessbrightness图片变亮图片变亮#romance-webkit-filter:brightness(200%);/*Chrome,Safari,Opera*/filter:brightness(200%);举例（filter-brightness）contrastvcontrast contrast 对比度对比度#romance-webkit-filter:contrast(500%);/*Chrome,Safari,Opera*/filter:contrast(500%);举例（filter-contrast ）drop-
9、shadowvdrop-shadowdrop-shadow阴影效果阴影效果#romance-webkit-filter:drop-shadow(15px15px18px#222);/*Chrome,Safari,Opera*/filter:drop-shadow(15px15px18px#222);举例（filter-drop-shadow）hue-rotate()vhue-rotatehue-rotate色相旋转色相旋转#romance90-webkit-filter:hue-rotate(90deg);/*Chrome,Safari,Opera*/filter:hue-rotate(90d
10、eg);#romance180-webkit-filter:hue-rotate(180deg);/*Chrome,Safari,Opera*/filter:hue-rotate(180deg);#romance270-webkit-filter:hue-rotate(270deg);/*Chrome,Safari,Opera*/filter:hue-rotate(270deg);举例（filter-hue-rotate ）invertvInvertInvert反转输入图像#romance-webkit-filter:invert(100%);/*Chrome,Safari,Opera*/fi
11、lter:invert(100%);举例（filter-invert）opacityvopacityopacity透明度效果透明度效果#romance-webkit-filter:opacity(30%);/*Chrome,Safari,Opera*/filter:opacity(30%);举例（filter-opacity）saturatevsaturatesaturate饱和度饱和度#romance-webkit-filter:saturate(300%);/*Chrome,Safari,Opera*/filter:saturate(300%);举例（filter-saturate ）se
12、piavsepia褐色#romance-webkit-filter:sepia(100%);/*Chrome,Safari,Opera*/filter:sepia(100%);filtervfilter复合函数v使用多个滤镜，每个滤镜使用空格分隔。v注意注意: :顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。#romance-webkit-filter:contrast(200%)brightness(150%);/*Chrome,Safari,Opera*/filter:contrast(200%)brightness(150%);
13、举例（ filter）Transition过渡transitiontransition简写属性，用于在一个属简写属性，用于在一个属性中设置四个过渡属性。性中设置四个过渡属性。transition-propertytransition-property规定应用过渡的 CSS 属性的名称。transition-durationtransition-duration定义过渡效果花费的时间。transition-timing-functiontransition-timing-function规定过渡效果的时间曲线。transition-delaytransition-delay规定过渡效果何时开始。
14、Transition过渡v举例：把鼠标指针放到div元素上，其宽度会从100px逐渐变为300px。举例（transition）divwidth:100px;transition:width2s;-moz-transition:width2s;/*Firefox4*/-webkit-transition:width2s;/*Safari和Chrome*/-o-transition:width2s;/*Opera*/div:hoverwidth:300px;vtransition-property 属性用于指定应用过渡效果的CSS属性的名称，其过渡效果通常在用户将指针移动到元素上时发生。当指定的
15、CSS属性改变时，过渡效果才开始。其基本语法格式如下：1、transition-property属性属性transition-property:none|all|property;属性值描述none没有属性会获得过渡效果。all所有属性都将获得过渡效果。property定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔。transition-property.html2、transition-duration属性属性vtransition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）。其基本语法格式如下：transition-durati
16、on:time;transition-duration.html3、transition-timing-function属性属性vtransition-timing-function属性规定过渡效果的速度曲线，默认值为ease，其基本语法格式如下：transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);属性值属性值描述描述linearlinear指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0,0,1,1)）。easeease指定以慢速开始，然后加快
17、，最后慢慢结束的过渡效果，等同于cubic-bezier(0.25,0.1,0.25,1）。ease-inease-in指定以慢速开始，然后逐渐加快（淡入效果）的过渡效果，等同于cubic-bezier(0.42,0,1,1）。ease-outease-out指定以慢速结束（淡出效果）的过渡效果，等同于cubic-bezier(0,0,0.58,1）。ease-in-outease-in-out指定以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42,0,0.58,1）。cubic-bezier(n,n,n,n)cubic-bezier(n,n,n,n)定义用于加速或者减速的贝
18、塞尔曲线的形状，它们的值在01之间。transition-timing-function.html4、transition-delay属性属性vtransition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。transition-delay的属性值可以为正整数、负整数和0。当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断；设置为正数时，过渡动作会延迟触发。其基本语法格式如下：vtransition-delay:time;5、transition属性属性vtransition属性是一个复合属性，用于在一个属性中设置transition-prop
19、erty、transition-duration、transition-timing-function、transition-delay四个过渡属性。其基本语法格式如下：transition：property duration timing-function delay;v在使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。Animation动画 keyframeskeyframes规定动画。规定动画。animationanimation所有动画属性的简写属性，除了 animation-play-state 属性。animation-nameanima
20、tion-name规定 keyframes 动画的名称。animation-durationanimation-duration规定动画完成一个周期所花费的秒或毫秒。animation-timing-functionanimation-timing-function规定动画的速度曲线。animation-delayanimation-delay规定动画何时开始。animation-iteration-countanimation-iteration-count规定动画被播放的次数。animation-directionanimation-direction规定动画是否在下一周期逆向地播放。an
21、imation-play-stateanimation-play-state规定动画是否正在运行或暂停。animation-fill-modeanimation-fill-mode规定对象动画时间之外的状态。keyframes规则v实例：使 div 元素匀速向下移动：举例（ animation-keyframes-fromto，animation-keyframes-%）divanimation:mymove5sinfinite;keyframesmymovefromtop:0px;totop:200px;-moz-keyframesmymove/*Firefox*/fromtop:0px;t
22、otop:200px;-webkit-keyframesmymove/*Safari和Chrome*/fromtop:0px;totop:200px;-o-keyframesmymove/*Opera*/fromtop:0px;totop:200px;animation-name属性v为 keyframes 动画规定名称v说明：必须明确规定 animation-duration 属性，否则时长为 0，就不会播放动画。v语法：animation-name:keyframename|none;值描述keyframename规定需要绑定到选择器的 keyframe 的名称。none规定无动画效果（可
23、用于覆盖来自级联的动画）。ise_animation-duration属性v定义动画完成一个周期所需要的时间，以秒或毫秒计。v语法：举例（ animation-duration ）animation-duration:time;值描述time规定完成动画所花费的时间。默认值是 0，意味着没有动画效果。animation-timing-function属性vanimation-timing-function 规定动画的速度曲线。v速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。语法：举例（ animation-timing-function.html ）an
24、imation-timing-function:value;值描述linear动画从头到尾的速度是相同的。ease默认。动画以低速开始，然后加快，在结束前变慢。ease-in动画以低速开始。ease-out动画以低速结束。ease-in-out动画以低速开始和结束。cubic-bezier(n,n,n,n)在 cubic-bezier （贝塞尔曲线）函数中自己的值。可能的值是从 0 到 1 的数值。animation-delay属性vanimation-delay 属性定义动画何时开始。语法：v允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。举例（ animation-delay.h
25、tml ）animation-delay:time;animation-delay:-2s/*W3C和Opera*/-moz-animation-delay:-2s/*Firefox*/-webkit-animation-delay:-2s/*Safari和Chrome*/animation-iteration-count属性vanimation-iteration-count 属性定义动画的播放次数v语法：animation-iteration-count:n|infinite;值描述n定义动画播放次数的数值。infinite规定动画应该无限次播放。animation-direction属性
26、vanimation-direction 属性定义是否应该轮流反向播放动画。v如果 animation-direction 值是 alternate，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。v注释：注释：如果把动画设置为只播放一次，则该属性没有效果。v语法：举例（ animation-direction.html ）animation-direction:normal|alternate;animation-play-state属性vanimation-play-state 属性定义动画的状态。v语法：举例（ animation-play-st
27、ate.html ）animation-play-state:running|paused;vRunning表示运动vPaused表示暂停animation-fill-mode属性vanimation-fill-mode 属性定义动画结束后的状态，语法：animation-fill-mode:none|forward|backward|both;vnone 无vforward 动画结束（to里面的所有样式）时的状态vbackward 动画开始（from里面的所有样式）时的状态vboth 动画开始或者结束时的状态。animation属性vanimation属性是一个简写属性，用于在一个属性中设置
28、animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction六个动画属性。其基本语法格式如下：v在上述语法中，使用animation属性时必须指定animation-name和animation-duration属性，否则持续的时间为0，并且永远不会播放动画。animation:animation-nameanimation-durationanimation-timing-functionanimation-de
29、layanimation-iteration-countanimation-direction;认识transformvTransform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。语法：vTransform能够实现：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix等。举例（ transform.html）transform:none|transform-functions;2D转换平移v使用translate()方法能够重新定义元素的坐标，实现平移的效果。该函数包含两个参数值，分别用于定义X轴和Y轴坐标，其基本语
30、法格式如下：v其中x-value是水平方向上，向右移动的距离；y-value指元素在垂直方向上，向下移动的距离；如果省略了第二个参数，则取默认值0。当值为负数时，表示反方向移动元素。举例（ transform-translate）transform:translate（x-value,y-value）;2D转换缩放vscale() 方法用于缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。其基本语法格式如下：v在上述语法中，x-axis和y-axis参数值可以是正数、负数和小数。正数值表示基于指定的宽度和高度放大元素。负数值不会缩小元素，而是翻转元素（如文字被反转），然后再
31、缩放元素。举例（ transform-scale）transform:scale(x-axis,y-axis);ise_2D转换倾斜vskew()方法能够让元素倾斜显示，该函数包含两个参数值，分别用来定义X轴和Y轴坐标倾斜的角度。skew()可以将一个对象围绕着X轴和Y轴按照一定的角度倾斜，其基本语法格式如下：v在上述语法中，参数x-angle和y-angle表示角度值，第一个参数表示相对于X轴进行倾斜，第二个参数表示相对于Y轴进行倾斜，如果省略了第二个参数，则取默认值0。举例（ transform-skew）transform:skew(x-angle,y-angle);ise_2D转换旋转
32、vrotate()方法能够旋转指定的元素对象，主要在二维空间内进行操作。该方法中的参数允许传入负值，这时元素将逆时针旋转。其基本语法格式如下：v在上述语法中，参数angle表示要旋转的角度值。如果角度为正数值，则按照顺时针进行旋转，否则，按照逆时针旋转。举例（ transform-rotate）transform:rotate(angle);ise_3D转换更改变换的中心点v通过transform属性可以实现元素的平移、缩放、倾斜以及旋转效果，这些变形操作都是以元素的中心点为基准进行的，如果需要改变这个中心点，可以使用transform-origin属性，其基本语法格式如下：v在上述语法中，t
33、ransform-origin属性包含三个参数，其默认值分别为50% 50% 0，各参数的具体含义如下表所示。举例（ transform-origin ）transform-origin:x-axisy-axisz-axis;ise_3D转换更改变换的中心点值描述x-axis定义视图被置于 X 轴的何处。可能的值：leftcenterrightlength%y-axis定义视图被置于 Y 轴的何处。可能的值：topcenterbottomlength%z-axis定义视图被置于 Z 轴的何处。可能的值：lengthise_3D转换rotateX()vrotateX()函数用于指定元素围绕X轴旋
34、转，其基本语法格式如下：v在上述语法格式中，参数a用于定义旋转的角度值，单位为deg，其值可以是正数也可以是负数。如果值为正，元素将围绕X轴顺时针旋转；反之，如果值为负，元素围绕X轴逆时针旋转。举例（ transform-rotateX ）transform:rotateX(a);ise_3D转换rotateY()vrotateY()函数指定一个元素围绕Y轴旋转，其基本语法格式如下：v在上述语法中，参数a与rotateX(a)中的a含义相同，用于定义旋转的角度。如果值为正，元素围绕Y轴顺时针旋转；反之，如果值为负，元素围绕Y轴逆时针旋转。举例（ transform-rotateY）transf
35、orm:rotateY(a);3D转换translate3d()vtranslate3d(x,y,z)只是规定3D转换的一种形式，此函数用来规定指定元素在三维空间中的位移。其基本语法格式如下：x:表示在x轴方向的位移。y:表示在y轴方向的位移。z:表示在z轴方向的位移。translate3d(x,y,z);举例（transform-translate3d）3D转换其他方法v需要说明的是，在CSS3中包含很多转换的属性，通过这些属性可以设置不同的转换效果，具体属性如下表所示。属性名称描述transform向元素应用 2D 或 3D 转换transform-style规定被嵌套元素如何在 3D 空
36、间中显示perspective规定 3D 元素的透视效果perspective-origin规定 3D 元素的底部位置backface-visibility定义元素在不面对屏幕时是否可见ise_3D转换其他方法v另外，CSS3中还包含很多转换的方法，运用这些方法可以实现不同的转换效果，具体方法下表所示。方法名称描述matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义3D转换，使用16个值的 4x4 矩阵translate3d(x,y,z)定义3D转换translateX(x)定义3D转换，仅使用用于 X 轴的值translateY(y)定义3D转换，仅使用用于
37、Y 轴的值translateZ(z)定义3D转换，仅使用用于Z 轴的值scale3d(x,y,z)定义 3D 缩放转换scaleX(x)定义 3D 缩放转换，通过给定一个 X 轴的值scaleY(y)定义 3D 缩放转换，通过给定一个 Y 轴的值scaleZ(z)定义 3D 缩放转换，通过给定一个 Z 轴的值rotate3d(x,y,z,angle)定义 3D 旋转rotateX(angle)定义沿 X 轴的 3D 旋转rotateY(angle)定义沿 Y 轴的 3D 旋转rotateZ(angle)定义沿 Z 轴的 3D 旋转perspective(n)定义 3D 转换元素的透视视图fle
38、xv布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。Flex布局是什么vFlex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。Webkit内核的浏览器，必须加上-webkit前缀。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。举例（flex1）.boxdisplay:flex;.boxdisplay:inline-flex;.bo
39、xdisplay:-webkit-flex;/*Safari*/display:flex;Flex容器v采用Flex布局的元素，称为Flex容器（flex container），简称容器。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称项目。容器的属性flex-directionflex-direction决定主轴的方向决定主轴的方向flex-wrapflex-wrap默认情况下，项目都排在一条线。flex-wrap属性定义，如果一条轴线排不下，如何换行。flex-flowflex-flow是flex-direction属性和flex-wrap属性的简写形式。jus
40、tify-contentjustify-content定义了项目在主轴上的对齐方式align-itemsalign-items定义项目在交叉轴上如何对齐align-contentalign-content定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。flex-direction属性举例（flex-direction）v决定主轴的方向（即项目的排列方向）。.boxflex-direction:row/水平方向，起点左端|row-reverse/水平方向，起点右端|column/垂直方向，起点上沿|column-reverse;/垂直方向，起点下沿flex-wrap属性v默认情况
41、下，项目都排在一条线（又称轴线）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。举例（flex-wrap）.boxflex-wrap:nowrap/默认，不换行|wrap/换行，第一行在上方|wrap-reverse;/换行，第一行在下方ise_justify-contentvjustify-content属性定义了项目在主轴上的对齐方式。.boxjustify-content:flex-start/左对齐|flex-end/右对齐|center/居中|space-between/两端对齐，项目之间的间隔都相等|space-around;/每个项目两侧的间隔相等。所以，项目之间的
42、间隔比项目与边框的间隔大一倍。举例（justify-content）ise_align-items属性valign-items属性定义项目在交叉轴上如何对齐。举例（align-items）.boxalign-items:flex-start/交叉轴的起点对齐|flex-end/交叉轴的终点对齐|center/交叉轴的中点对齐|stretch;（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。|baseline/项目的第一行文字的基线对齐Align-selfv定义定义flexflex子项单独在侧轴（纵轴）方向上的对齐方式子项单独在侧轴（纵轴）方向上的对齐方式。align-sel
43、f：auto/如果align-self的值为auto，则其计算值为元素的父元素的align-items值，如果其没有父元素，则计算值为stretch。|flex-start/起始位置的边界紧靠住该行的侧轴起始边界|flex-end/起始位置的边界紧靠住该行的侧轴结束边界|center/弹性盒子元素在该行的侧轴（纵轴）上居中放置|baseline/如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐|stretch/如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/he
44、ight属性的限制。举例（align-self）Align-self.boxli:nth-child(1)-webkit-align-self:flex-end;align-self:flex-end;举例（align-self）项目的属性属性属性描述描述orderorder定义项目的排列顺序。数值越小，排列越靠前，默认为0flex-growflex-grow定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-flex-shrinkshrink定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。justify-justify-basisbasis定义了在分配多余空间
45、之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。flexflexflex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。orderv设置或检索弹性盒模型对象的子元素出現的順序。vorder定义将会影响 值为static元素的层叠级别，数值小的会被数值大的盖住。.testdisplay:flex;.item1order:1;margin:-10px;.testdisplay:flex;.item2order:1;margin:-10px;举例（ord
46、er1）flex-growv设置或检索弹性盒的扩展比率。v根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。v。.flex2display:flex;width:600px;margin:0;padding:0;list-style:none;.flex2li:nth-child(1)width:200px;.flex2li:nth-child(2)flex-grow:1;width:50px;.flex2li:nth-child(3)flex-grow:3;width:50px;举例（flex-grow）Flex-shrinkv设置或检索弹性盒的收缩比率设置或检索弹性盒的收缩比率。v根
47、据弹性盒子元素所设置的收缩因子作为比率来收缩空间。.flexdisplay:flex;width:400px;margin:0;padding:0;list-style:none;.flexliwidth:200px;.flexli:nth-child(3)flex-shrink:3;举例（flex-shrink）Flexv复合属性。设置或检索弹性盒模型对象的子元素如何分配空间复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。是由flex-grow、flex-shrink、和flex-basis三个属性组成的简写形式。举例（flex2）flexflexflex-growflex-grow
48、flex-shrinkflex-shrinkFlex-basisFlex-basis剩余空间分配比例默认1，空间不足时等比例缩小；非1时，空间不足不缩小项目占据的主轴空间默认默认01autononenone00autoautoauto11auton n（非负数）（非负数）n10%长度或百分比长度或百分比11长度或百分比n,m(n,m(非负数非负数) )nm0%n,n,长度或百分比长度或百分比n1长度或百分比Flex 举例（flex2） .main .main display: flex; display: flex; width: 600px; width: 600px; .main div
49、height: 100px; .main div height: 100px; .item1 .item1 width: 140px; width: 140px; flex:2 1 0%; flex:2 1 0%; background: #7d7dff; background: #7d7dff; .item2 .item2 width: 100px; width: 100px; flex:2 1 auto; flex:2 1 auto; background: #ff79bc; background: #ff79bc; .item3 .item3 flex: 1 1 200px; flex: 1 1 200px; background: #aaa; background: #aaa; 圣杯布局ise_
