CSS3 弹性布局弹性流（flex-flow）属性示例

flex-flow是CSS3引入的flex layout中用来控制弹性项目摆放方向（flex-direction）和包装（flex-wrap）的速写属性。

CSS3,教程

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 18137
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.flex-container {
    display: flex;
}
.flex-container.first {
    flex-flow: row;
}
/* Initial value. Main-axis is
   inline, no wrap. */

.flex-container.second {
    flex-flow: column wrap;
    -webkit-flex-flow: column wrap;
}
/* Main-axis is block-direction (top to bottom)
   and lines wrap in the inline direction (rightwards). */

.flex-container.third {
    flex-flow: row-reverse wrap-reverse;
}
/* Main-axis is the opposite of inline direction
   (right to left). New lines wrap upwards. */
/* other styles just for format */

ul {
    padding: 0;
}
li {
    list-style: none;
}
.flex-container {
    background: deepskyblue;
    width: 200px;
    height: 200px;
    margin: 5px auto;
}
.flex-container.first {
    height: 100px;
}
.flex-item {
    background: tomato;
    padding: 5px;
    width: 80px;
    height: 80px;
    margin: 5px;
    line-height: 80px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}
h1 {
    font-size: 22px;
    text-align: center;
}
.flex-demo{display:flex;}

HTML

flex-flow是CSS3引入的flex layout中用来控制弹性项目摆放方向（flex-direction）和包装（flex-wrap）的速写属性。

CSS3,教程

编辑器支持Emmet

快捷键

flex-flow是CSS3引入的flex layout中用来控制弹性项目摆放方向（flex-direction）和包装（flex-wrap）的速写属性。

CSS3,教程

使用CSS3弹性框布局flex-grow方法实现列宽弹性伸展动画效果

7个常用的CSS3弹性框（flexbox）布局模式（模板）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：