弹性盒子flex的基本介绍

此篇为理论知识，实际练习操作请看这篇： 练习（弹性盒子）

弹性盒子

是一种用于在页面上布置元素的布局模式

弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。

父元素设置为dispaly：flex；
或者取值为 inline-flex

图片转自MDN

• “容器”中有两条垂直的坐标轴
• 横向的叫做主轴
• 纵向的叫做交叉轴
• 主轴左边与右边分别叫做主轴起点与主轴终点
• 交叉轴上边与下边分别叫做交叉轴起点与交叉轴终点
• 每个项目的宽与高叫做主轴尺寸与交叉轴尺寸

flex-flow

flex-flow是flex-direction和flex-wrap的复合属性
两个属性都是必写的

flex-direction

属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)

• row——子元素每块在父元素内从左向右排列

• row-reverse——子元素每块在父元素内从右向左排列

• column——子元素每块在父元素内依次从上到下排列

• column-reverse——子元素每块在父元素内从下往上排列

flex-wrap

弹性盒的项目默认都是排列在一个轴上的
如果项目多的话，会“弹性”压缩在一行

取值：
默认值为nowrap

• nowrap——flex 的元素被摆放到到一行，这可能导致溢出 flex 容器。 cross-start 会根据 flex-direction 的值 相当于 start 或 before。

• wrap——flex 元素 被打断到多个行中。cross-start 会根据 flex-direction 的值选择等于start 或before。cross-end 为确定的 cross-start 的另一端。

• wrap-reverse和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。

justify-content

justify-content属性定义了项目在主轴上的对齐方式

属性值如下：

• flex-start：左对齐（默认）
• flex-end：右对齐
• center：居中
• space-between：两端对齐（项目间间隔相同）
• space-around：两端间隔对齐（项目间间隔是项目与边框间隔的2倍）
• space-evently：平分空白对齐

align-items

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

属性值如下：

• stretch：未设置高度（或height: auto）的项目占满整个容器高度（默认）
• flex-start ：交叉轴起点对齐
• flex-end：交叉轴终点对齐
• center：交叉轴中点对齐
• baseline：项目第一行文字的基线对齐

align-content

align-content属性定义多根轴线的对齐方式
这个属性只有在容器有多条主轴是才有效，一条主轴无效
类似于justify-content属性
属性值如下：

• stretch：轴线占满整个交叉轴（默认值）
• flex-start：与交叉轴的起点对齐
• flex-end：与交叉轴的终点对齐
• center：与交叉轴的中点对齐
• space-between：与交叉轴两端对齐，轴线间间隔相等
• space-around：每根轴线两侧的间隔都相等

order

order允许我们自定义项目的排列顺序

默认为0，属性值是数字，数值越小越靠前

flew

flex是flex-grow、flex-shrink、flex-basis的复合属性

默认值：0 1 auto，后两个属性可选

可以写关键字：auto (1 1 auto) 和 none (0 0 auto)

flex-grow

flex-grow定义项目的放大比例
默认是0，不变化

按照比例平分空白区域

flex-shrink

flex-shrink定义项目的缩小比例
默认是1，就是如果空间不足，该项目将等比缩小

通过这个属性我们可以控制各个项目缩小的比例

flex-basis

flex-basis定义在分配多余空间之前，项目占据的主轴空间

默认auto，就是项目本来的宽度

可以手动设置长度

##align-self
align-self属性允许某个项目拥有不同对齐方式

因此会覆盖align-items设置的对齐属性

默认值auto，继承弹性容器的align-items属性值

属性值除了auto外，和align-items一样，

• auto
• stretch
• flex-start
• flex-end
• center
• baseline