CSS的flex布局~你能看得懂的代码示例

常用的几个样式

效果如图

目录

demo1

代码如下

demo2

代码如下

demo3

代码如下

demo1
代码如下

1

2

3

4

注意: Internet Explorer 9 及更早版本不支持 flex 属性。

注意: Internet Explorer 10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。

注意: Safari 6.1 (及更新浏览器) 通过 -webkit-flex 属性支持。

demo2
代码如下

.demo{
width: 500px;
height: 300px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
background:yellow;
justify-content: space-around;
}
.item{

min-width:30%;
background:pink;

}

1

2

3

4

注意: Internet Explorer 9 及更早版本不支持 flex 属性。

注意: Internet Explorer 10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。

注意: Safari 6.1 (及更新浏览器) 通过 -webkit-flex 属性支持。

demo3
代码如下

.item
{
flex:1;
margin:1px;
}

红色

蓝色

带有更多内容的绿色 div

注意: Internet Explorer 9 及更早版本不支持 flex 属性。

注意: Internet Explorer 10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。

注意: Safari 6.1 (及更新浏览器) 通过 -webkit-flex 属性支持。

参考文档 https://www.cnblogs.com/lynnmn/p/6262941.html

参考文档 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

参考文档 http://www.runoob.com/try/try.php?filename=trycss3_flex