Flex布局兼容知识点总结

假设父容器class为 box,子项目为item.
旧版语法如下：
一：定义容器的display属性。
旧语法如下写法：

.box {
    display: -moz-box;
    display: -webkit-box;
    display: box;
}

新版语法需要如下写：

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

或者 行内

.box{
    display: -webkit-inline-flex;
    display:inline-flex;
}

二：容器属性(旧版语法)
1. box-pack 属性;(水平方向上对齐方式)
box-pack定义子元素主轴对齐方式。

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

box-pack属性总共有4个值：

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

各个值的含义如下：
start:
   对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间)
   对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）
end:
  对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。
  对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）。
center:
   均等地分割多余空间，其中一半空间被置于首个子元素前，另一半被置于最后一个子元素后.
justify:
   在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）。

2.box-align 属性(垂直方向上的对齐方式)
box-align定义子元素交叉轴对齐方式。

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

box-align属性总共有5个值：

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

各个值的含义如下：
start:
   对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。
   对于反方向的框，每个子元素的下边缘沿着框的底边放置。
end:
   对于正常方向的框，每个子元素的下边缘沿着框的底边放置。
   对于反方向的框，每个子元素的上边缘沿着框的顶边放置。
center:
    均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。
baseline:
    如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。
stretch:
   拉伸子元素以填充包含块

3.box-direction 属性
box-direction定义子元素的显示方向。

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

box-direction属性总共有3个值：

.box{
    box-direction: normal | reverse | inherit;
    /*显示方向：默认方向 | 反方向 | 继承子元素的 box-direction*/
}

4.box-orient 属性

box-orient定义子元素是否应水平或垂直排列。

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

box-orient属性总共有5个值：

.box{
    box-orient: horizontal | vertical | inline-axis | block-axis | inherit;
    /*排列方向：水平 | 垂直 | 行内方式排列（默认） | 块方式排列 | 继承父级的box-orient*/
}

horizontal: 在水平行中从左向右排列子元素。
vertical: 从上向下垂直排列子元素。
inline-axis： 沿着行内轴来排列子元素（映射为 horizontal）。
block-axis： 沿着块轴来排列子元素（映射为 vertical）。
inherit： 应该从父元素继承 box-orient 属性的值。

5.box-lines 属性
box-lines定义当子元素超出了容器是否允许子元素换行。

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

box-lines属性总共有2个值：

.box{
    box-lines: single | multiple;
    /*允许换行：不允许（默认） | 允许*/
}

single：伸缩盒对象的子元素只在一行内显示
multiple：伸缩盒对象的子元素超出父元素的空间时换行显示

6.box-flex 属性。
box-flex定义是否允许当前子元素伸缩。

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

box-flex属性使用一个浮点值：

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

7.box-ordinal-group 属性
box-ordinal-group定义子元素的显示次序，数值越小越排前。

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

box-direction属性使用一个整数值：

.item{
    box-ordinal-group: <integer>;
    /*显示次序：<一个整数，默认为1，数值越小越排前>*/
}

新版语法如下：

定义容器的display属性：

.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;
    /*多主轴对齐：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/
}

flex-direction值介绍如下：
    row: 默认值。灵活的项目将水平显示，正如一个行一样。
    row-reverse: 与 row 相同，但是以相反的顺序。
    column: 灵活的项目将垂直显示，正如一个列一样。
    column-reverse: 与 column 相同，但是以相反的顺序。

flex-wrap 值介绍如下:
    nowrap: flex容器为单行。该情况下flex子项可能会溢出容器。
    wrap: flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行。
     wrap-reverse： 换行并第一行在下方

flex-flow值介绍如下(主轴方向和换行简写)：
    <flex-direction>: 定义弹性盒子元素的排列方向
    <flex-wrap>：控制flex容器是单行或者多行。

justify-content值介绍如下：
    flex-start: 弹性盒子元素将向行起始位置对齐。
    flex-end: 弹性盒子元素将向行结束位置对齐。
    center: 弹性盒子元素将向行中间位置对齐。
    space-between: 第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，
而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。

space-around: 伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

align-items值介绍如下:
   flex-start: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
   flex-end: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
   center: 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
    baseline: 如弹性盒子元素的行内轴与侧轴为同一条，则该值与‘flex-start‘等效。其它情况下，该值将参与基线对齐。
   stretch: 如果指定侧轴大小的属性值为‘auto‘，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照‘min/max-width/height‘属性的限制。

align-content值介绍如下:
    flex-start: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
    flex-end: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
    center: 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
    space-between: 第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，
剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
   space-around: 各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。
   stretch: 各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于‘flex-start‘。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

子元素属性

.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;
    /*单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
}

兼容写法

1. 首先是定义容器的 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+ */
}

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

2. 子元素主轴对齐方式（水平居中对齐）

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

兼容写法新版语法的 space-around 是不可用的：如下新版语法space-around;

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

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

3. 子元素交叉轴对齐方式（垂直居中对齐）

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

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

4. 子元素的显示方向。

子元素的显示方向可通过 box-direction + box-orient + flex-direction 实现，如下代码：
1. 左到右(水平方向)

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

2. 右到左(水平方向)

.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 写法的 box-direction 只是改变了子元素的排序，并没有改变对齐方式，需要新增一个 box-pack 来改变对齐方式。

3. 上到下(垂直方向上)

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

4. 下到上（垂直方向上）

.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;
}

5. 是否允许子元素伸缩

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

box语法中 box-flex 如果不是0就表示该子元素允许伸缩，而flex是分开的，上面 flex-grow 是允许放大（默认不允许）

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

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不缩小）*/
}

6. 子元素的显示次序

.item{
    -webkit-box-ordinal-group: 1;
    -moz-order: 1;
    -webkit-order: 1;
    order: 1;
}
时间： 2024-10-06 11:08:11

Flex布局兼容知识点总结的相关文章

flex布局兼容写法

父级: isplay: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; -webkit-justify-conte

(转)30 分钟学会 Flex 布局

原文链接:https://zhuanlan.zhihu.com/p/25303493 最简单实用的 Flex 布局教程,30 分钟让你学会 Flex 语法基础. 为什么我要写这一篇关于 Flex 布局的教程? 因为它十分简单灵活,区区简单几行代码就可以实现各种页面的的布局,以前我在学习页面布局的时候我深受其 float.display.position 这些属性的困扰.然而学习 Flex 布局,你只要学习几个 CSS 属性,就可以写出简洁优雅复杂的页面布局. 本教程适合人群: 前端小白,不太明白

Flex布局新写法兼容写法详解

很久之前用过flex,但是没有考虑过兼容性问题,为了兼容ios一定要加上-webkit前缀: ul{ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ display: -webkit-flex; } li{ flex:1 0 auto; -webkit-flex:1 0 auto; 合并写法,不缩放宽度 flex-shink = 0 } 注意:用过flex布局后,子元素的float,position都没有效了 flex布局教程参考网址,非常

flex布局的兼容问题

一.W3C各个版本的flex 2009 version 标志:display: box; or a property that is box-{*} (eg. box-pack) 2011 version 标志:display: flexbox; or the flex() function or flex-pack property 2012 version 标志:display: flex/inline-flex; and flex-{*} properties 2014 version 新

Flex 布局知识点梳理

传统的布局方案,在针对特殊布局时会很不方便,比如垂直居中,把一个容器等分为N列等等.自从 Flex 出现以后,这些都迎刃而解了,本文对Flex相关内容做一个简单梳理. 什么是 Flex Flex 是 Flexible Box 的缩写,意为"弹性布局",任何一个容器都可以指定为Flex布局.设为 Flex 布局以后,子元素的 float.clear和vertical-align属性将失效.要设置一个元素采用 flex 布局,只需设置器 display 属性取值为 flex 即可. .fl

CSS3弹性伸缩布局（二）——flex布局

上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9月提出的工作草案,这个草案是由W3C 推出的最新语法.这个版本立志于指定标准,让新式的浏览器全面兼容,在未来浏览器的更新换代中实现统一. 这里我们还是继续上一篇博客中的例子,使用最新版本的flex布局来实现相同的效果. html代码: <div> <p>发生过的空间还是看价格哈健康啊水

FLEX布局的一些问题和解决方法

前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的强拼硬凑来达到设计需求,在各个屏幕上显示效果友好,弹性的伸缩元素,简洁易维护的代码.只可惜,这位老兄有一位致命的缺点----除了chrome外几乎所有手机上浏览器都没有兼容它!!,或者支持程度大不一样!这样开发人员头疼的问题就来了,刚刚在手机上忽略掉IE这个强盗的兼容问题,又来一个?!.flex的优

css3的flex布局

今天看到百度前端学院有关于flex布局方面的内容,就看了下flex布局,顺便做下总结,方便自己以后看.内容大概分几个方面,一.flex布局的好处以及应用场景:二.原理:三.基本内容:四.demo: 一.flex布局的好处以及应用场景: flex好处就是灵活方便,大多应用在移动端,pc端由于兼容问题应用不太广泛. 二.原理: 说到原理说神马呢?先说下常见的布局吧:一.固定布局:就是宽高都固定的那种,width:500px;height:100px;二.流体式布局:width:100%;height

flex布局的使用，纪念第一次开发手机网站

一直专注于PC网站的开发,不曾接触手机网站,于今日机缘巧合也是公司业务需要,并在之前学习过flex的布局,于是一并实践.碰到的问题还是很多的,主要是谈谈flex布局. flex布局是css3里的内容,一种新的布局方式,也称之为 弹性布局,主要是为了取代 inline-bolck  和float 为总布局.当然,这两种布局还是有各自的优势的,毕竟存在就有他的理由. 历史进程是  box-->flexbox --> flex 由于是在谷歌调试,所以很理所当然的以为手机上的浏览器都是支持html5+