Flex布局实用手册

最新推荐文章于 2022-12-16 00:14:26 发布

weixin_33980459

最新推荐文章于 2022-12-16 00:14:26 发布

阅读量150

点赞数

原文链接：https://my.oschina.net/luozt/blog/649842

版权

为什么80%的码农都做不了架构师？>>>

Flex布局

兼容写法：

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

.flex-row{
  -webkit-box-orient: horizontal;
  box-orient: horizontal;

  -webkit-flex-direction: row;
  flex-direction: row;
}

.flex-col{
  -webkit-box-orient: vertical;
  box-orient: vertical;

  -webkit-flex-direction: column;
  flex-direction: column;
}

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

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

注意知识点：

如果设置了flex-col布局，而父容器不设置高度，那么子项目显示为原内容高度
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
设置了Flex布局，float, clear, vertical-align都将失效
浏览器现基本支持，IE10+
display:flex和display:box有什么区别？前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本，后者是2009年的语法，已经过时，是需要加上对应前缀的

基础学习&阅读：