深入理解CSS弹性盒模型flex

男娘i 2022-09-23 08:18 212阅读 0赞

## 前面的话 ##

CSS3引入了一种新的布局模型——flex布局。flex是flexible box的缩写，一般称之为弹性盒模型。和CSS3其他属性不一样，flexbox并不是一个属性，而是一个模块，包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕

### 版本更迭 ###

flexbox布局的语法规范经过几年发生了很大的变化。从2007年07月，flex第一版本的工作草案发布，到2012年09月，flex最新版本成为候选推荐。flex主要经历了三个版本

【1】旧版本 display:box | inline-box;

IE浏览器不支持，windows下的safari浏览器只支持旧版本的写法且需要添加前缀，移动端可以兼容到andriod2.1-4.3和ios3.2-6.1也需要添加前缀

【2】混合版本 display:flexbox | inline-flexbox;

该版本只有IE10支持，且需要添加前缀-ms-

【3】新版本 display: flex | inline-flex

该版本兼容IE11+、firefox、safari、chrome、opera及移动端，但移动端ios7.1-8.4需要添加前缀-webkit-

### display ###

要让一个元素变成伸缩容器，需要使用display属性。采用flex布局的元素，称为伸缩容器(flex container)，容器内的子元素称为伸缩项目(flex item)

\[注意\]浏览器会将任何直接在伸缩容器里的连续文字块包起来成为匿名伸缩项目

使用flex布局实现上是使元素FFC化(flex formatting context伸缩格式化上下文)，FFC是普通流的一种。而浮动流和定位流以及CSS其他属性对FFC是有影响的，主要表现在以下几点:

\[1\]float、clear和vertical-align属性在伸缩项目上没有效果

\[2\]伸缩容器的margin与其内容的margin不会重叠

\[3\]text-align属性在伸缩容器上没有效果，因为其只可应用于块级block容器

\[4\]另外，conlumns属性伸缩容器上没有效果

弹性盒模型的两种容器块级伸缩容器和内联伸缩容器的区别类似于block和inline-block的区别，一个独占一行，另一个非独占一行

![复制代码][copycode.gif]

//弹性盒模型: 块级伸缩容器 | 内联伸缩容器
    //新版本
    display: flex | inline-flex;
    //混合版本
    display: flexbox | inline-flexbox;
    //旧版本
    display: box | inline-box;

![复制代码][copycode.gif]

### 基本概念 ###

![740839-20160326220055995-1104247096.png][]

伸缩容器默认存在两条轴: 水平的主轴(main axis) 和垂直的侧轴(cross axis)

\[注意\]主轴方向不一定是水平的，它主要取决于justify-content属性

主轴起点叫main start，主轴终点叫main end；侧轴起点叫cross start，侧轴终点叫cross end

伸缩项目默认沿主轴排列。单个伸缩项目占据的主轴空间叫main size ，占据的侧轴空间叫cross size

\[注意\]伸缩项目的main size和cross size主要由宽度或高度决定

### 伸缩容器 ###

以下6个属性作用在伸缩容器上

[伸缩流方向 flex-direction][flex-direction]

[伸缩流换行 flex-wrap][flex-wrap]

[伸缩流(包括方向与换行) flex-flow][flex-flow]

[主轴对齐 justify-content][justify-content]

[侧轴对齐 align-items][align-items]

[堆栈伸缩行 align-content][align-content]

【1】伸缩流方向:指定主轴的方向(即伸缩项目在伸缩容器中的排列方向)

![复制代码][copycode.gif]

![复制代码][copycode.gif]

src="http://sandbox.runjs.cn/show/puenpou8" frameborder="0" width="320" height="240" style="width: 701.023px; height: 320px;">

\[注意\]伸缩流方向与direction和wrinting-mode有关系

src="http://sandbox.runjs.cn/show/huizi34x" frameborder="0" width="320" height="240" style="width: 701.023px; height: 320px;">

【2】伸缩流换行:指定伸缩项目溢出伸缩容器时是否换行

src="http://sandbox.runjs.cn/show/aatpjiwp" frameborder="0" width="320" height="240" style="width: 701.023px; height: 270px;">

\[注意\]此时，CSS允许使用overflow属性来处理溢出内容的显示方式

\[注意\]伸缩项目的排列顺序同样与direction和wrinting-mode有关系

src="http://sandbox.runjs.cn/show/kao5g7q0" frameborder="0" width="320" height="240" style="width: 701.023px; height: 430px;">

【3】伸缩流:伸缩流方向与伸缩行换行的缩写

//伸缩流: 伸缩流方向 | 伸缩行换行
    //新版本同混合版本
    flex-flow: <flex-direction> | <flex-wrap> 
    [默认值] flex-flow: row nowrap
    //旧版本无对应属性

src="http://sandbox.runjs.cn/show/3h1ssbxa" frameborder="0" width="320" height="240" style="width: 701.023px; height: 460px;">

src="http://sandbox.runjs.cn/show/1yyidovt" frameborder="0" width="320" height="240" style="width: 701.023px; height: 430px;">

【4】主轴对齐:用来设置伸缩容器当前行伸缩项目在主轴方向的对齐方式，指定如何在伸缩项目之间分布伸缩容器额外空间

当一行上的所伸缩项目不能伸缩或可伸缩已达到最大长度时，这一属性才会对伸缩容器额外空间进行分配。当伸缩项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制

![复制代码][copycode.gif]

![复制代码][copycode.gif]

src="http://sandbox.runjs.cn/show/hvs3zwof" frameborder="0" width="320" height="240" style="width: 701.023px; height: 240px;">

\[注意\]主轴对齐方式与direction、writing-mode、flex-flow都有关

src="http://sandbox.runjs.cn/show/4wqy9kzt" frameborder="0" width="320" height="240" style="width: 701.023px; height: 480px;">

【5】侧轴对齐:用来设置伸缩容器当前行在侧轴方向的对齐方式

![复制代码][copycode.gif]

![复制代码][copycode.gif]

\[注意\]如果伸缩项目有width/height属性将优先于侧轴对齐为拉伸的方式

src="http://sandbox.runjs.cn/show/h3ypxiw9" frameborder="0" width="320" height="240" style="width: 701.023px; height: 350px;">

\[注意\]侧轴对齐方式与direction、writing-mode、flex-flow都有关

src="http://sandbox.runjs.cn/show/vhxvyqrx" frameborder="0" width="320" height="240" style="width: 701.023px; height: 480px;">

【6】堆栈伸缩行:指定多个伸缩项目行在侧轴的对齐方式

![复制代码][copycode.gif]

![复制代码][copycode.gif]

\[注意\]该属性只有在flex-wrap:wrap | wrap-reverse;且伸缩项目存在多行时才生效

src="http://sandbox.runjs.cn/show/fmvgb0ri" frameborder="0" width="320" height="240" style="width: 701.023px; height: 380px;">

\[注意\]堆栈伸缩行与direction、writing-mode、flex-flow都有关

src="http://sandbox.runjs.cn/show/zyfot0d0" frameborder="0" width="320" height="240" style="width: 701.023px; height: 500px;">

### 伸缩项目 ###

一个伸缩项目就是伸缩容器的一个子元素。伸缩容器中的文本也被视为一个伸缩项目。以下6个属性设置在伸缩项目上。

[自身侧轴对齐方式 align-self][align-self]

[伸缩基准值 flex-basis][flex-basis]

[扩展比率 flex-grow][flex-grow]

[收缩比率 flex-shrink][flex-shrink]

[伸缩性 flex][flex]

[显示顺序 order][order]

【1】自身侧轴对齐方式:单个伸缩项目在侧轴的对齐方式，该属性可以覆盖伸缩容器的侧轴对齐方式

\[注意\]对于匿名伸缩项目，align-self的值永远与其关联的伸缩容器的align-items的值相同

![复制代码][copycode.gif]

![复制代码][copycode.gif]

\[注意\]如果align-self的值为auto，则其计算值为伸缩项目的伸缩容器的align-items值

\[注意\]如果伸缩项目的任一个侧轴上的外边距为auto，则该伸缩项目在伸缩容器的剩余空间内居中对齐，且align-self没有效果。

【2】伸缩基准值: 伸缩项目在主轴方向上的初始大小

//新版本
    flex-basis: <length> | auto[默认]
    //混合版本
    positive-flex: <number>[默认为1]
    //旧版本无对应属性

如果flex-basis的值为0，表示伸缩项目在主轴方向上的初始大小为0，则分配所有空间；如果flex-basis的值为auto，表示伸缩项目在主轴方向上的初始大小为其本身的大小，则分配剩余空间

\[注意\]flex-basis的<length>值可以是一个数字后面跟着px、em等单位，也可以是一个百分数，相对于其父伸缩容器的主轴长度

【3】扩展比率: 当伸缩容器的额外空间为正值时，此伸缩项目相对伸缩容器里其他伸缩项目能扩展的空间比例

//新版本
    flex-grow: <number>[默认为0]
    //混合版本
    positive-flex: <number>[默认为0]
    //旧版本无对应属性

若flex-grow的值为0表示即使存在剩余空间也不放大；若所有项目的flex-grow属性都为1，则它们将等分剩余空间(如果有的话)；若一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

【4】收缩比率:当伸缩容器的额外空间为负值时，此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例

//新版本
    flex-shrink: <number>[默认为1]
    //混合版本
    negative-flex: <number>[默认为0]
    //旧版本无对应属性

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

\[注意\]伸缩基准值、扩展比率和收缩比率都可以为小数，但不能为负数

【5】伸缩性:是扩展比率、收缩比率和伸缩基准值的缩写

![复制代码][copycode.gif]

flex: none => flex: 0 0 auto;
        flex: auto => flex: 1 1 auto;
        flex: 0 => flex: 0 1 0%;
        flex: 1 => flex: 1 1 0%;
        flex: 0 auto => flex: 0 1 auto;
        flex: 0 1 => flex: 0 1 0%;

![复制代码][copycode.gif]

\[注意\]当flex为关键字none或存在auto时，flex-basis为auto；若flex只有数字值，则flex-basis为0%；

![复制代码][copycode.gif]

//新版本
    flex: none[默认] | [<flex-grow> <flex-shrink>? || <flex-basis>]
    //混合版本
    flex: none[默认] | [<pos-flex> <neg-flex>? || <preferred-size>]
    //旧版本
    box-flex: <number>[默认为0]

![复制代码][copycode.gif]

【6】显示顺序: 定义伸缩项目的排列顺序，数值越小，排列越靠前

\[注意\]伸缩容器中的伸缩项目默认显示顺序是遵循文档在源码中出现的先后顺序(HTML文档的DOM结构中的先后顺序)

![复制代码][copycode.gif]

//新版本
    order: <number>[默认为0]
    //混合版本
    flex-order: <number>[默认为0]
    //旧版本
    box-ordinal-group: <integer>[默认为1]

![复制代码][copycode.gif]

\[注意\]order的属性值可以是负数，但不能是小数

源引：http://www.cnblogs.com/xiaohuochai/p/5323146.html\#anchor1

[copycode.gif]: /images/20220721/f89359384da14787bcd98858388e2d05.png
[740839-20160326220055995-1104247096.png]: /images/20220721/c6fcff415e6748b7a9f32bcfd7bb885e.png
[flex-direction]: http://www.cnblogs.com/xiaohuochai/p/5323146.html#anchor4-1
[flex-wrap]: http://www.cnblogs.com/xiaohuochai/p/5323146.html#anchor4-2
[flex-flow]: http://www.cnblogs.com/xiaohuochai/p/5323146.html#anchor4-3
[justify-content]: http://www.cnblogs.com/xiaohuochai/p/5323146.html#anchor4-4
[align-items]: http://www.cnblogs.com/xiaohuochai/p/5323146.html#anchor4-5
[align-content]: http://www.cnblogs.com/xiaohuochai/p/5323146.html#anchor4-6
[align-self]: http://www.cnblogs.com/xiaohuochai/p/5323146.html#anchor6-1
[flex-basis]: http://www.cnblogs.com/xiaohuochai/p/5323146.html#anchor6-2
[flex-grow]: http://www.cnblogs.com/xiaohuochai/p/5323146.html#anchor6-3
[flex-shrink]: http://www.cnblogs.com/xiaohuochai/p/5323146.html#anchor6-4
[flex]: http://www.cnblogs.com/xiaohuochai/p/5323146.html#anchor6-5
[order]: http://www.cnblogs.com/xiaohuochai/p/5323146.html#anchor6-6