美文网首页
flex布局兼容性代码

flex布局兼容性代码

作者: xywait | 来源:发表于2017-06-30 14:49 被阅读0次

flex:定义布局为盒模型

flex-v:盒模型垂直布局

flex-1:子元素占据剩余的空间

flex-align-center:子元素垂直居中

flex-pack-center:子元素水平居中

flex-pack-justify:子元素两端对齐

.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}

.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}

.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}

.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}

.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}

.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

相关文章

  • css-flex布局

    1.flex布局的兼容性写法 关于flex布局的兼容性,参考flex兼容性 .flex{ display:-web...

  • 弹性盒布局兼容性问题

    弹性盒布局兼容性代码: .display-flex{ display: -webkit-box; display:...

  • flex弹性布局

    flex弹性布局与传统布局的区别 传统布局优点:兼容性好缺点:繁琐 flex弹性布局优点: 简单缺点:兼容性不好 ...

  • flex弹性布局

    移动web开发——flex布局 1.0传统布局和flex布局对比 1.1传统布局 兼容性好 布局繁琐 局限性,不能...

  • Flex布局

    移动web开发——flex布局 1.0传统布局和flex布局对比 1.1传统布局 兼容性好 布局繁琐 局限性,不能...

  • flex布局小结

    关于flex布局 flex布局的兼容性chrome 21+opera 12.1+firefox 22+Safari...

  • Flex布局:Flex布局

    1、flex布局与传统布局的区别 传统布局: 兼容性好但是布局繁琐 局限性,不能再移动端很好的布局 flex布局:...

  • 补充8: flex布局

    flex 布局与传统布局 传统布局兼容性好, 但是布局繁琐, 且不适合移动端flex布局更方便, 更适用移动端. ...

  • flex布局兼容性代码

    flex:定义布局为盒模型 flex-v:盒模型垂直布局 flex-1:子元素占据剩余的空间 flex-align...

  • 移动端Flex布局

    1.0传统布局和flex布局对比 1.1传统布局 兼容性好布局繁琐局限性,不能再移动端很好的布局 1.2 flex...

网友评论

      本文标题:flex布局兼容性代码

      本文链接:https://www.haomeiwen.com/subject/xxzbcxtx.html