`
fish119
  • 浏览: 145976 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

CSS3.0 FLEX布局(兼容微信浏览器)

阅读更多

 

  /* 设置flex布局 */
    display:-webkit-box;/* android 2.1-3.0, ios 3.2-4.3 */
    display:-webkit-flex;/* Chrome 21+ */
    display:-ms-flexbox;/* WP IE 10 */
    display:flex;/* android 4.4 */
 /* 设置方向 */
    -webkit-box-orient: vertical;/* android 2.1-3.0, ios 3.2-4.3 */
    -webkit-flex-direction: column;/* Chrome 21+ */
    -ms-flex-direction: column;/* WP IE 10 */
    flex-direction: column;/* android 4.4 */

 

 /* 子元素自动占据剩余的空间 */
    -webkit-box-flex:1;/* android 2.1-3.0, ios 3.2-4.3 */
    -webkit-flex:1;/* Chrome 21+ */
    -ms-flex:1;/* WP IE 10 */
    flex:1;/* android 4.4 */

 

  /* 子元素 水平居中 */
    -webkit-box-pack: center;/* android 2.1-3.0, ios 3.2-4.3 */
    -webkit-justify-content: center;/* Chrome 21+ */
    -ms-flex-pack: center;/* WP IE 10 */
    justify-content: center;/* android 4.4 */

 

/* 水平布局下的子元素 垂直居中 */
    -webkit-box-align: center;/* android 2.1-3.0, ios 3.2-4.3 */
    -webkit-align-items: center;/* Chrome 21+ */
    -ms-flex-align: center;/* WP IE 10 */
    align-items: center;/* android 4.4 */

 

  /* 水平布局下的子元素 2端对齐 */
    -webkit-box-pack: justify;/* android 2.1-3.0, ios 3.2-4.3 */
    -webkit-justify-content: space-between;/* Chrome 21+ */
    -ms-flex-pack: justify;/* WP IE 10 */
    justify-content: space-between;/* android 4.4 */
分享到:
评论

相关推荐

    Div+CSS 3.0网页布局案例精粹

    Div+CSS 3.0网页布局案例精粹

    css3.0参考手册 css3.0参考手册

    css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...

    微信浏览器内显示遮罩层提示点击右上角

    微信浏览器内显示遮罩层提示点击右上角,选择在浏览器中打开链接

    CSS属性、浏览器兼容与网页布局

    CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页布局CSS属性、浏览器兼容与网页...

    《DIV+CSS 3.0:网页布局案例精粹》

    《DIV+CSS 3.0:网页布局案例精粹》系统地介绍了CSS样式的基础理论和实际应用技术,并结合实例来介绍使用Div+CSS布局制作网页的方法和技巧。在介绍使用CSS样式进行设计的同时,还结合实际网页制作中可能遇到的问题,...

    div+css3.0网页布局精粹

    div+css3.0网页布局精粹,为布局解惑

    CSS的flex布局.ppt

    网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一...

    CSS2.0+CSS3.0的chm文档

    完整的CSS2.0和CSS3.0的chm文档,可以方便地查询CSS的各种属性和用法。

    仿微信聊天布局

    模仿微信的聊天布局。高度自适应

    CSS3.0精美参考手册

    这是《css商业网站布局之道》光盘里附带的的CSS中文完全参考手册,chm制作的非常不错,页面很精美,内容很充实,而且每一项都编辑得很好,很专业。

    CSS3.0中文参考手册

    CSS3.0中文参考手册,CSS3.0中文参考手册,CSS3.0中文参考手册,CSS3.0中文参考手册,CSS3.0中文参考手册,CSS3.0中文参考手册CSS3.0中文参考手册,CSS3.0中文参考手册,CSS3.0中文参考手册

    Html5+Css3.0中文帮助文档

    中文帮助文档 Html5中文帮助文档 Css3.0中文帮助文档 Html5 Css3.0 中文帮助文档 Html5中文帮助文档 Css3.0中文帮助文档 Html5 Css3.0

    css 3.0 插件 dreamweaver

    css 3.0 插件 dreamweavercss 3.0 插件 dreamweavercss 3.0 插件 dreamweavercss 3.0 插件 dreamweavercss 3.0 插件 dreamweavercss 3.0 插件 dreamweaver

    SS2.0和CSS3.0 最新中文版参考手册(完整版)

    本压缩包解压后含两本手册,内容如下: css2.0 参考手册 本手册针对的是已有一定网页设计制作经验的读者。... 本手册为最新的CSS 3.0 完整中文版参考手册含目录索引,提供了最新CSS3.0的完整参考内容。

    样式css3.0文档

    样式表样式css3.0文档下载! 样式表样式css3.0文档下载! 样式表样式css3.0文档下载!

    CSS3.0基础知识

    CSS3.0基础知识,介绍了级联风格样式表的相关信息以及如何用CSS3.0进行网页风格设计

    CSS3.0 API中文文档

    CSS 3.0 API文档中文版,以最低分上传提供给大家下载。

    CSS3.0+html5 API

    CSS3.0与html5.0参考手册.rar,网页设计/网页布局最新版本的参考文档 CSS3.0 html5.0

    css2.0和css3.0的中文参考手册

    css2.0和css3.0的中文参考手册

Global site tag (gtag.js) - Google Analytics