使用弹性盒子兼容低端适配有时需要:

display:flex 和 display:-webkit-box

 

      display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center; display: flex;
align-items: center;
justify-content: center;

对应属性:

弹性盒子:

   display: -webkit-box;
display: flex;

上下垂直

    -webkit-box-align: center;
align-items: center;

左右居中

    -webkit-box-pack: center;
justify-content: center;

占父级元素宽度的n份

 -moz-box-flex:3;
-webkit-box-flex:3;
-webkit-flex:3;
flex:3;

父元素设置子元素 倒序

 display: -webkit-box;
display: flex; -webkit-box-direction:reverse;
box-direction:reverse;
flex-direction: row-reverse

父元素设置子元素 列排序

 display: -webkit-box;
display: flex; flex-direction: column; /*列*/ box-orient: vertical;
-webkit-box-orient: vertical;

父元素设置子元素 行排序

   display: -webkit-box;
display: flex; flex-direction: row; /*行*/ box-orient: horizontal;
-webkit-box-orient: horizontal;

css 弹性盒子--“垂直居中”--兼容写法的更多相关文章

  1. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  2. CSS 弹性盒子模型

    CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...

  3. css弹性盒子新旧兼容

    前言:本篇随笔是对弹性盒子有了解的人来写的这篇文章,具体属性产生的效果这里不做说明,基础的东西去查文档.这里只是总结. 时至今日,css3的flex弹性盒子在移动端基本上都是支持的,但不排除有些些低版 ...

  4. css弹性盒子学习

    css3弹性盒子是一种布局方式,在适应不同的屏幕大小的时候,能够确保元素拥有更恰当的排布行为.它只是视觉呈现上的,即显示顺序适应显示空间,与源代码无关,源代码顺序不受影响. 定义一个弹性盒子: 在cs ...

  5. CSS弹性盒子的基本用法

    .container { width: 302px; height: 302px; border: 1px solid; display: flex } .item { width: 100px; h ...

  6. 快速使用CSS 弹性盒子

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现:2009年,W3C提出了一种新的方案 ...

  7. CSS:CSS弹性盒子布局 Flexible Box

    一.简介 flexbox:全称Flexible Box, 弹性盒子布局.可以简单实现各种伸缩性的设计,它是由伸缩容器和伸缩项目组成.任何一个元素都可以指定为flexbox布局.这种新的布局方案在200 ...

  8. css弹性盒子

    body元素设置: <body> <div id="wai"> <div class="zi">1</div> ...

  9. CSS中盒子垂直居中的常用方法

    在前端开发过程中,盒子居中是常常用到的.其中 ,居中又可以分为水平居中和垂直居中.水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现.但是垂直居中相对来说是比较复杂一些的.下面 ...

随机推荐

  1. C#设计模式---观察者模式(Observer Pattern)

    一.目的 提供一种一对多的关系,当主题发生变化时候,可以通知所有关联的对象. 二.定义 观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象,这个主题对象在状态发生变化时,会通 ...

  2. Java的GUI组件的布局管理器

    1 import java.awt.BorderLayout; 2 import java.awt.FlowLayout; 3 import java.awt.Font; 4 import java. ...

  3. nginx《一安装》

    linux上nginx相关 wget https://nginx.org/download/nginx-1.14.1.tar.gz tar -zxvf nginx-1.14.1.tar.gz ./co ...

  4. Vue初体验(一)

    每个 Vue 应用都需要通过实例化 Vue 来实现. 语法格式如下: var vm = new Vue({ // 选项 }) 接下来让我们通过实例来看下 Vue 构造器中需要哪些内容: 可以看到在 V ...

  5. 记一次 .NET 某新能源汽车锂电池检测程序 UI挂死分析

    更多高质量干货:参见我的 GitHub: dotnetfly 一:背景 1. 讲故事 这世间事说来也奇怪,近两个月有三位朋友找到我,让我帮忙分析下他的程序hangon现象,这三个dump分别涉及: 医 ...

  6. [源码解析] 深度学习流水线并行 PipeDream(5)--- 通信模块

    [源码解析] 深度学习流水线并行 PipeDream(5)--- 通信模块 目录 [源码解析] 深度学习流水线并行 PipeDream(5)--- 通信模块 0x00 摘要 0x01 前言 0x02 ...

  7. 简说yuv

    最近弄了一个读取y4m文件转成yuv的流的事情,记录一些yuv相关的细节 为什么会有yuv 因为我们目前的显示器显示的原理都是三原色,几乎所有的视频数据最后都要转为rgb格式才能渲染到显示屏上,而原始 ...

  8. ysoserial CommonsColletions5分析

    我们知道,AnnotationInvocationHandler类在JDK8u71版本以后,官方对readobject进行了改写. 所以要挖掘出一条能替代的类BadAttributeValueExpE ...

  9. 本地Markdown文件上传到博客

    本地Markdown文件上传到博客 参考:https://www.cnblogs.com/ccylhw/p/13954153.html 1.Typora 最漂亮的写作APPhttps://www.ty ...

  10. MySQL查询之内连接,外连接查询场景的区别与不同

    前言 我在写sql查询的时候,用的最多的就是where条件查询,这种查询也叫内连查询inner join,当然还有外连查询outer join,左外连接,右外连接查询,常用在多对多关系中,那他们区别和 ...