故如虹,知恩;故如月,知明
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术

css弹性盒子,flex布局

5674人阅读 2018/11/25 18:55 总访问:3838906 评论: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

评价