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

代码如下

 

    

   

1

   

2

   

3

   

4

  

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

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

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

 

---

demo3

代码如下

 

 

红色

 

蓝色

 
 

带有更多内容的绿色 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