美文网首页
弹性盒布局兼容性问题

弹性盒布局兼容性问题

作者: 勇敢的心1025 | 来源:发表于2017-07-21 15:37 被阅读0次

弹性盒布局兼容性代码:

.display-flex{

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

}

.flex-item {

-webkit-box-flex: 1;

-moz-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

}

.flex-direction {

-webkit-box-orient: vertical;

-webkit-flex-direction: column;

-moz-flex-direction: column;

-ms-flex-direction: column;

-o-flex-direction: column;

flex-direction: column;

}

.justify-content {

-webkit-box-pack: center;

-moz-justify-content: center;

-webkit-justify-content: center;

justify-content: center;

}

.align-items {

-webkit-box-align: center;

-moz-align-items: center;

-webkit-align-items: center;

align-items: center;

}

.flex-wrap{

-webkit-flex-wrap:wrap;

-webkit-box-lines:multiple;

-moz-flex-wrap:wrap;

flex-wrap:wrap;

}

相关文章

  • 弹性盒布局兼容性问题

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

  • 弹性盒布局兼容性问题

    .display-flex{ display: -webkit-box; display: -moz-box; d...

  • display:flex Flex布局 弹性盒模型

    【弹性盒模型布局不兼容IE-10及以下】 设置为Flex布局后,子元素的 float clear vertic...

  • flex

    弹性盒子布局 参考 阮一峰老师 兼容性 设置为弹性盒子display: flex 要加上浏览器的前缀。设置为弹性盒...

  • flex弹性布局

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

  • CSS学习总结

    一、Flex-弹性盒布局 弹性盒定义了子元素如何在弹性盒中布局。 1. flex-direction ,设置主轴,...

  • 弹性布局总结

    1.flex弹性布局学习总结 2.弹性盒模型布局使用 布局案例: ...

  • css

    一:布局 浮动:做文字环绕效果 弹性盒:单行或单列布局 网格:多行多列布局 1、弹性盒 详细文档见MDN[http...

  • flex 弹性布局盒模型

    flex 弹性布局盒模型 设置弹性盒模型 display:flex (新版) display:-webkit-b...

  • CSS面试考点之Flex布局和Grid网格布局

    1、flexbox(弹性盒布局模型) Flexible Box简称flex,意为”弹性布局”,可以简便、完整、响应...

网友评论

      本文标题:弹性盒布局兼容性问题

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