css弹性盒子，flex布局

6759人阅读 2018/11/25 18:55 总访问：4811419 评论：0 收藏：0 手机

分类: CSS

css弹性盒子由于版本不同浏览器问题造成了一些不同的写法

 display:flexbox;

在google浏览器中如果使用下面的写法就不行

 display:flexbox;

需要加上前缀--webkit，就是浏览器兼容问题

 display: -webkit-box;

Flex的各种浏览器兼容问题写法(各种写法一堆列出来，支持哪一种就设别哪一种)

     .content {
            display: -webkit-box !important;
            display: -moz-box !important;
            display: -o-box !important;
            display: -webkit-flex !important;
            display: -ms-flexbox !important;
            display: flexbox !important;
            display: flex !important;
            display: box !important;
        }

Flex布局实现垂直与水平居中

  /*垂直水平居中*/
  -webkit-box-align: center;
  display: flex;//设置布局为flex
  flex-direction: column;//设置排列方向为横向排列
  justify-content: center; //水平方向居中
  align-items: center;//垂直方向居中

水平分隔

justify-content:space-between......

在vs中可能写display:flex要报错，但是其实写出来效果是可以的,如下

欢迎加群讨论技术，群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

css弹性盒子，flex布局

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}