IT入门 > 教程 > css教程 >

CSS flex-direction 属性

实例 设置 div 元素内弹性盒元素的方向为相反的顺序： div{ display:flex; flex-direction:row-reverse;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -...

CSS justify-content 属性

实例 在弹性盒对象的 div 元素中的各项周围留有空白： div{ display: flex; justify-content: space-around;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在...

CSS align-items 属性

实例 居中对齐弹性盒的各项 div 元素： div{ display: flex; align-items:center;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的...

CSS flex-wrap 属性

实例 让弹性盒元素在必要的时候拆行： display:flex;flex-wrap: wrap; 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支...

CSS align-content 属性

实例 对齐弹性盒的 div 元素的各项： div{ display: flex; flex-flow: row wrap; align-content:space-around;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -we...

CSS flex-flow 属性

实例 让弹性盒的元素以相反的顺序显示，且在必要的时候进行拆行： display:flex;flex-flow:row-reverse wrap; 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。...

CSS order 属性

实例 设置弹性盒对象元素的顺序： div#myRedDIV {order:2;}div#myBlueDIV {order:4;}div#myGreenDIV {order:3;}div#myPinkDIV {order:1;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版...

CSS align-self 属性

实例 居中对齐弹性对象元素内的某个项： #myBlueDiv{ align-self:center;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字...

CSS flex 属性

实例 让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容： #main div{ flex:1;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在...

CSS3 @keyframes 规则

实例 使一个div元素逐渐移动200像素： @keyframes mymove{from {top:0px;}to {top:200px;}}@-webkit-keyframes mymove /* Safari and Chrome */{from {top:0px;}to {top:200px;}} 尝试一下 » 在此页底部有更多的例子。 浏览器...