CSS Flex 新旧法语对比

CSS Flex 新旧法语对比

老版本的语法

定义容器的display属性

.box{
    display: -moz-box; /*Firefox*/
    display: -webkit-box; /*Safari,Opera,Chrome*/
    display: box;
}

容器属性

1.box-pack 属性

box-pack定义子元素主轴对齐方式, box-pack(主轴对齐)属性总共有4个值: start(左对齐（默认）) | end(右对齐) | center(居中对齐) | justify(左右对齐)

.box{
    -moz-box-pack: center; /*Firefox*/
    -webkit-box-pack: center; /*Safari,Opera,Chrome*/
    box-pack: center;
}

2.box-align 属性

box-align定义子元素交叉轴对齐方式, box-align(交叉轴对齐)属性总共有5个值：start(顶部对齐（默认）) | end(底部对齐) | center(居中对齐) | baseline(文本基线对齐) | stretch(上下对齐并铺满)

.box{
    -moz-box-align: center; /*Firefox*/
    -webkit-box-align: center; /*Safari,Opera,Chrome*/
    box-align: center;
}

3.box-direction 属性

box-direction定义子元素显示方向, box-direction(子元素显示方向)属性总共有3个值：normal(默认方向) | reverse(反方向) | inherit(这里是继承子元素的,有坑)

.box{
    -moz-box-direction: reverse; /*Firefox*/
    -webkit-box-direction: reverse; /*Safari,Opera,Chrome*/
    box-direction: reverse;
}

4.box-orient 属性

box-orient定义子元素水平或垂直排列, box-orient(子元素排列方向)属性总共有5个值：horizontal(水平) | vertical(垂直) | inline-axis(行内方式排列（默认）) | block-axis(块方式排列) | inherit

.box{
    -moz-box-orient: horizontal; /*Firefox*/
    -webkit-box-orient: horizontal; /*Safari,Opera,Chrome*/
    box-orient: horizontal;
}

5.box-lines 属性

box-lines定义当子元素超出了容器是否允许子元素换行, box-lines(是否允许换行)属性总共有2个值： single(不允许（默认) | multiple(允许)

.box{
    -moz-box-lines: multiple; /*Firefox*/
    -webkit-box-lines: multiple; /*Safari,Opera,Chrome*/
    box-lines: multiple;
}

子元素属性

1.box-flex 属性

box-flex定义是否允许当前子元素伸缩, box-flex属性使用一个浮点值：一个浮点数，默认为0.0，即表示不可伸缩，大于0的值可伸缩，柔性相对

.item{
    -moz-box-flex: 1.0; /*Firefox*/
    -webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/
    box-flex: 1.0;
}

2.box-ordinal-group 属性

box-ordinal-group定义子元素的显示次序，数值越小越排前, box-direction属性使用一个整数值：显示次序：<一个整数，默认为1，数值越小越排前>

.item{
    -moz-box-ordinal-group: 1; /*Firefox*/
    -webkit-box-ordinal-group: 1; /*Safari,Opera,Chrome*/
    box-ordinal-group: 1;
}

新的Flex语法

定义容器的display属性: 块级显示(对外表现出block元素的特性)和行内显示(对外表现出inline-block元素的特性),

.box{
    display: -webkit-flex; /*webkit*/
    display: flex;
}

/*行内flex*/
.box{
    display: -webkit-inline-flex; /*webkit*/
    display:inline-flex;
}

容器样式

.box{
    flex-direction: row | row-reverse | column | column-reverse;
    /*主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上*/

    flex-wrap: nowrap | wrap | wrap-reverse;
    /*换行：不换行（默认） | 换行 | 换行并第一行在下方*/

    flex-flow: <flex-direction> || <flex-wrap>;
    /*主轴方向和换行简写*/

    justify-content: flex-start | flex-end | center | space-between | space-around;
    /*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/

    align-items: flex-start | flex-end | center | baseline | stretch;
    /*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    /*多主轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/
}

子元素属性

.item{
    order: <integer>;
    /*排序：数值越小，越排前，默认为0*/

    flex-grow: <number>; /* default 0 */
    /*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/

    flex-shrink: <number>; /* default 1 */
    /*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/

    flex-basis: <length> | auto; /* default auto */
    /*固定大小：默认为0，可以设置px值，也可以设置百分比大小*/

    flex: none | [ <‘flex-grow‘> <‘flex-shrink‘>? || <‘flex-basis‘> ]
    /*flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，*/

    align-self: auto | flex-start | flex-end | center | baseline | stretch;
    /*单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
}

兼容写法

首先是定义容器的 display 属性：

.box{
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}

由于旧版语法并没有列入W3C标准，所以不用写 display:box。

这里还要注意的是，如果子元素是行内元素，在很多情况下都要使用 display:block 或 display:inline-block 把行内子元素变成块元素（例如使用 box-flex 属性），这也是旧版语法和新版语法的区别之一。

子元素主轴对齐方式: justify-content 

.box{
    -webkit-box-pack: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
}

对应于老版本语法的: box-pack, 需要注意的是旧版语法有4个参数，而新版语法有5个参数，兼容写法新版语法的 space-around 是不可用的：

.box{
    box-pack: start | end | center | justify;
    /*主轴对齐：左对齐（默认） | 右对齐 | 居中对齐 | 左右对齐*/

    justify-content: flex-start | flex-end | center | space-between | space-around;
    /*主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/
}

子元素交叉轴对齐方式: align-items

.box{
-webkit-box-align: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center;
}

对应于老版本的: box-align, 这里只是参数写法不同，但是功能没变：

.box{
    box-align: start | end | center | baseline | stretch;
    /*交叉轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满*/

    align-items: flex-start | flex-end | center | baseline | stretch;
    /*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
}

子元素的显示方向:flex-direction(默认为row)

兼容的写法:子元素的显示方向可通过 box-direction + box-orient + flex-direction 实现，下面请看实例：

左到右

.box{
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

右到左: (在老版本中的写法 box-direction 只是改变了子元素的排序，并没有改变对齐方式，需要新增一个 box-pack 来改变对齐方式。)

.box{
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

上到下

.box{
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

下到上

.box{
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

是否允许子元素伸缩

.item{
    -webkit-box-flex: 1.0;
    -moz-flex-grow: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

.item{
    -webkit-box-flex: 1.0;
    -moz-flex-shrink: 1;
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
}

在老版本的box语法中 box-flex 如果不是0就表示该子元素允许伸缩，而flex是分开的，上面 flex-grow 是允许放大（默认不允许），下面的 flex-shrink 是允许缩小（默认允许）。box-flex 默认值为0;

.item{
    box-flex: <value>;
    /*伸缩：<一个浮点数，默认为0.0，即表示不可伸缩，大于0的值可伸缩，柔性相对>*/

    flex-grow: <number>; /* default 0 */
    /*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/

    flex-shrink: <number>; /* default 1 */
    /*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/
}

子元素的显示次序

.item{
    -webkit-box-ordinal-group: 1;
    -moz-order: 1;
    -webkit-order: 1;
    order: 1;
}

具体的运行Demo截图,后续补上

时间： 2024-10-16 19:43:00

CSS Flex 新旧法语对比的相关文章

MapReduce简述、工作流程及新旧API对比

什么是MapReduce? 你想数出一摞牌中有多少张黑桃.直观方式是一张一张检查并且数出有多少张是黑桃. MapReduce方法则是: 1. 给在座的所有玩家中分配这摞牌. 2. 让每个玩家数自己手中的牌有几张是黑桃,然后把这个数目汇报给你. 3. 你把所有玩家告诉你的数字加起来,得到最后的结论. MapReduce概述 MapReduce是一种分布式计算模型,由Google提出,主要用于搜索领域,解决海量数据的计算问题.它的核心设计理念是移动计算,而不是移动数据. MapReduce合并了两种

新旧数据库对比的一些随笔

例如: 1.vs建立 sql server 2008 projet....项目. 2.Data---schema compare ---new schema comparetion 3.选择两个数据库比较. 4.Modifier le sql et puis enregistrer document .sql. 5.Fait back up de nouveau DB. 6.Fait restore et rouler des fichiers .sql et puis tester le Ap

express新旧语法对比

备个份, 原文: http://stackoverflow.com/questions/25550819/error-most-middleware-like-bodyparser-is-no-longer-bundled-with-express EDIT: I have posted a fork of Brian's seed with all the changes given below:https://github.com/LossyHorizon/angular-socket-io

Flex布局新旧混合写法详解（兼容微信）

flex是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了(虽然现在还有很多不支持 flex 的浏览器).然而国内很多浏览器对 Flex 的支持都不是很好,这里针对微信内置浏览器写了一套兼容写法.下面入正题. 首先还是从两个版本的语法开始讲吧,这里还是假设flex容器为 .box ,子元素为 .item . 旧语法篇 定义容器的display属性 .box{ display: -moz-box; /*Firefox*/ display: -we

css弹性盒子新旧兼容

前言:本篇随笔是对弹性盒子有了解的人来写的这篇文章,具体属性产生的效果这里不做说明,基础的东西去查文档.这里只是总结. 时至今日,css3的flex弹性盒子在移动端基本上都是支持的,但不排除有些些低版本的设备(Android4.4以下,只能兼容旧版的flexbox布局),还有个别的国产设备并不支持flex那么就需要用到旧版的flex-box. 在移动端布局呢,我们最常用的无非这么几种情况1.垂直居中 2,.平分 3.分配剩余区域 那么我们需要用到新旧盒子的哪些属性呢?请看下面 一.开启弹性盒子

天气预报API(五)：城市代码--“新编码”和“旧编码” 对比

参考一些博客.文章 来查找 测试 接口,后来发现两套城市编码标准,有点想法,故拿来对比分析. 注:新旧编码是个人主观叫法,只是为了方便称呼,可能有不当之处,请留言更正. 暂且称 中国天气网等网站使用的城市代码称为 "旧编码": 全国城市代码列表(旧) 或 全球城市.景点代码列表(旧) 暂且称 中国气象频道.腾讯天气使用的城市代码为 "新编码": 全国城市代码列表(新) 直观对比 以山东省青岛市为例,我用树状图的形式展现"新旧编码"的差异: &qu

CSS Flex

jiubanbenn关于flex 请看这里  https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 太详细啦!!!  还通俗易懂!!! 没啥好说的 PS  display:box 和 display:flex-box 是display:flex 的旧版本

JavaScript 兼容新旧版chrome和firefox的桌面通知

1.新/旧版本的chrome和firefox都可支持,IE下不支持因此设置为了在最小化窗口处闪烁显示提示文字. 2.设置为提示窗口显示5秒即关闭. 3.可设置图标和点击提示窗口要跳转到的页面(见输入参数). var timer = null, title = $('title').text(); $('body').on('click', function() { clearInterval(timer); $('title').text(title); }); function showMsg

linux V4L2驱动中新旧版本下video buffer alloc与mmap的处理区别

首先需要说明目前在比较新的内核中已经采用了 vb2_queue与vb2_buffer来替代旧版本内核中经常使用到的 videobuf_queue与videobuf_buffer. 两者主要用于对用户层申请VIDIOC_REQBUF时的使用. 从用户层Request的Memory的类型区分,典型的两种是: V4L2_MEMORY_USERPTR以及V4L2_MEMORY_MMAP,前者的内存主动权位于用户层,即驱动中的视频输出内存地址由用户层来提供,后者MMAP操作的内存缓存类型一般需要由驱动自己