Flex(弯曲；屈伸；活动)

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。

flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思

弹性盒子是一种用于按行或按列布局元素的一维布局方法; 元素可以膨胀以填充额外的空间, 也可收缩以适应更小的空间;

使用Flexbox来进行布局的方案称之为flex布局(flex layout)

为什么使用Flex布局？

任何技术以及方案的出现都是为了弥补之前的缺陷，作为一种更优解。

传统的布局方案使用标准流、浮动和定位，基于盒子模型实现网页布局。

如何要在父子盒子中实现子元素垂直居中？

——传统布局可用 position + transform

那如何使父级容器（container）内的所有子元素等分父级宽度or高度?

又如何使父级容器内的所有子元素等间隙分布?

……

新的方案flex布局更加灵活，可以更简便、响应式地实现以上页面布局。

Flex布局中的重要概念(两对象,两轴,两线)

两对象:flex container(容器)和flex item(项目)

flex container(容器)

设置 display 属性为 flex 或者 inline-flex 可以成为 flex container

flex： flex container 以 block-level 形式存在

inline-flex： flex container 以 inline-level 形式存在

flex item(项目)

当flex container中的子元素变成了flex item时, 具备一下特点:

flex item的布局将受flex container属性的设置来进行控制和布局;

flex item不再严格区分块级元素和行内级元素;

flex item默认情况下是包裹内容的, 但是可以设置宽度和高度;

模型(两轴两线)

容器默认存在两根轴：水平的 主轴（main axis） 和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。(start起始线,end结束线)

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

给父级容器设置的属性

1.flex-direction

flex items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布 我们可以通过设置主轴和交叉轴来控制子元素的排序方式

flex-direction 可以设置 main axis 的方向，有 4 个取值

row（默认值）、row-reverse、column、column-reverse

flex-wrap

默认情况下，项目在水平方向上都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap 设置 flex container 是单行展示or多行展示

取值有: nowrap、 wrap、 wrap-reverse

（1）nowrap（默认）：单行,不换行。 (2) wrap：多行 (3)wrap-reverse：多行（对比 wrap，cross start 与 cross end 反转)

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

书写随意,flex-direction属性和flex-wrap属性先后位置任意,都可省略(取默认值)

justify-content

justify-content定义 flex items(项目) 在 main axis(主轴) 上的对齐方式,

取值有:

flex-start（默认值）：与 main start 对齐

flex-end：与 main end 对齐

center：居中对齐

space-between：

flex items 之间的距离相等

与 main start、main end两端对齐

space-around：

flex items 之间的距离相等

flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半

space-evenly：

flex items 之间的距离相等

flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离

align-items

align-items属性定义项目在交叉轴上如何对齐。

normal：在弹性布局中，效果和stretch一样

stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container

flex-start：与 cross start 对齐

flex-end：与 cross end 对齐

center：居中对齐

baseline：与基准线对齐

align-content

align-content属性定义了多根轴线 在 cross axis 上的对齐方式,用法与 justify-content 类似。如果项目只有一根轴线，该属性不起作用。

stretch（默认值）：与 align-items 的 stretch 类似

flex-start：与 cross start 对齐

flex-end：与 cross end 对齐

center：居中对齐

space-between：

flex items 之间的距离相等

与 cross start、cross end两端对齐

space-around：

flex items 之间的距离相等

flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半

space-evenly：

flex items 之间的距离相等

flex items 与 cross start、cross end 之间的距离 等于 flex items 之间的距离

给子级项目设置的属性

align-self

flex items 的align-self属性允许单个项目有与其他项目不一样的对齐方式，可以通过 align-self 覆盖 flex container 设置的 align-items

auto（默认值）：遵从 flex container 的 align-items 设置

stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 可以设置任意整数（正整数、0、负整数）

flex-grow(长大)

flex-grow 属性设置 flex items 如何拉伸/扩展

可以设置任意非负数字（0、正小数、正整数），默认值是 0

当 flex container 在 main axis 方向上有剩余size时，flex-grow 属性才会有效

如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为 flex container 的剩余 size * flex-grow / sum

flex items 扩展后的最终 size 不超过 max-width\max-height

flex-shrink(缩小)

flex-shrink 设置 flex items 如何收缩/缩小

可以设置任意非负数字（0、正小数、正整数），默认值是 1

当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效

如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为

flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和

flex items 收缩后的最终 size 不能小于 min-width\min-height

flex-basis

flex-basis属性定义了在分配多余空间之前，项目(flex items)占据的主轴空间(在 main axis 方向上的 base size)。浏览器根据这个属性，计算主轴是否有多余空间。

它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

auto（默认值）、具体的宽度数值（比如300px）

决定 flex items 最终 base size 的因素，从优先级高到低

max-width\max-height\min-width\min-height

flex-basis

width\height

内容本身的 size

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的合写，

默认值为0 1 auto。后两个属性可选。

flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。

该属性有三个快捷值：auto (1 1 auto) 和 none (0 0 auto)和initial(0 1 auto) 。

单值语法: 值必须为以下其中之一:

一个无单位数(): 它会被当作flex-grow的值。

一个有效的宽度(width)值: 它会被当作 flex-basis的值。

关键字none，auto或initial。

双值语法: 第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值。

第二个值必须为以下之一：

一个无单位数：它会被当作 flex-shrink 的值。

一个有效的宽度值: 它会被当作 flex-basis的值。

三值语法:

第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值。

第二个值必须为一个无单位数，并且它会被当作 flex-shrink 的值。

第三个值必须为一个有效的宽度值， 并且它会被当作 flex-basis 的值。

常见flex布局样式

圣杯布局

流式布局