IT入门 > 教程 > css教程 >

CSS flex-grow 属性

实例 让第二个元素的宽度为其他元素的三倍： div:nth-of-type(1) {flex-grow: 1;}div:nth-of-type(2) {flex-grow: 3;}div:nth-of-type(3) {flex-grow: 1;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第...

CSS flex-shrink 属性

实例 A, B, C 设置 flex-shrink:1， D , E 设置为 flex-shrink:2： !DOCTYPE htmlhtmlheadmeta charset="utf-8"title嘀嗒教程(dida100.com)/titlestyle#content { display: flex; width: 500px;} #content div { flex-basis: 120px; border: 3px...

CSS flex-basis 属性

实例 设置第二个弹性盒元素的初始长度为 80 像素： div:nth-of-type(2) {flex-basis: 80px;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms-...

CSS3 box-align 属性

实例 对div中的子元素同时使用box-align和box-pack的居中属性： div{width:350px;height:100px;border:1px solid black;/* Internet Explorer 10 */display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-align:center;/* Firefox */display...

CSS3 box-direction 属性

实例 由右至左，显示一个div box的子元素： div{width:350px;height:100px;border:1px solid black;/* Internet Explorer 10 */display:-ms-flexbox;-ms-flex-direction:row-reverse;/* Firefox */display:-moz-box;-moz-box-direction:rever...

CSS3 box-flex 属性

实例 定义两个灵活的 p 元素。如果父级 box 的总宽度为 300px，＃P1 将有一个 100px 的宽度，P2 将有一个 200px 的宽度： #p1{ -moz-box-flex:1.0; /* Firefox */ -webkit-box-flex:1.0; /* Safari and Chrome */ -ms...

CSS3 box-flex-group 属性

浏览器支持 目前主流浏览器并不支持 box-flex-group 属性。 属性定义及使用说明 box-Flex-group属性是用来指定灵活的元素的Flex组。 提示： ：随着box收缩和增长，元素是灵活的收缩或增长。...

CSS3 box-lines 属性

实例 指定一个div box允许扩大到多行： div{display:box;box-orient:horizontal;box-lines:multiple;width:200px;} 尝试一下 » 浏览器支持 目前所有主流浏览器都不支持box-lines属性。 属性定义及使用说明...

CSS3 box-ordinal-group 属性

实例 指定的一个box的子元素的显示顺序： .box{display:-ms-flexbox; /* Internet Explorer 10 */display:-moz-box; /* Firefox */display:-webkit-box; /* Safari and Chrome */display:box;border:1px solid black;}.ord1{margin:5px;-ms-...

CSS3 box-orient 属性

实例 指定div元素的子元素横向排列： div{width:350px;height:100px;border:1px solid black;/* Firefox */display:-moz-box;-moz-box-orient:horizontal;/* Safari, Opera, and Chrome */display:-webkit-box;-webkit-box-orient:horizontal;...