cloud.tencent.com/developer/s.

web开发中，弹性盒子是必不可少基本知识，做了一张思维脑图，便捷你去使用这些。你能个人收藏出来便捷搜索

弹性盒子关键可分为俩类，一个要给父元素使用的，一个要给子元素使用的，下边我就用文本来表示她们

给父元素

一共6种不同的弹力器皿

flex-direction 设定子元素排列是行或是列

• flex-direction:row; 设定依照行开展排序
• flex-direction:column; 依照列进行筛选
• flex-direction: column-reverse;依照列开展反方向排列 severse反序
• flex-direction:row-reverse;依照行开展反方向排列

flex-wrap 电脑浏览器外溢项 能设自动换行和不换行

• flex-wrap: nowrap; 初始值不换行
• flex-wrap: wrap; 在外溢自动换行或是换列
• flex-wrap: wrap-reverse 开展反序自动换行

flex-flow flex-direction:flex-wrap;的缩写

• flex-direction: column;flex-wrap: wrap; （等同于）flex-flow: column wrap;

justify-content 沿弹力框的主轴轴承灵便非配子原素

• justify-content: flex-start 初始值 坐落于弹性盒子开头
• justify-content: flex-end 坐落于弹性盒子的结尾
• justify-content: center 坐落于弹性盒子中间
• justify-content: space-between 坐落于各行各业中间留出空白中科数控 两侧贴死
• justify-content: space-around 坐落于各行各业中间、以内、以外留出的空白 两侧不贴死

align-items 顺着弹性盒子的十字轴进行定位 只有作为一行 用以原素两端对齐

• align-items: stretch 初始值 子元素被拉申融入器皿
• align-items: center 坐落于容器核心
• align-items: flex-start 坐落于开始
• align-items: flex-end 坐落于末尾
• align-items: baseline 坐落于容器基准线上

align-content 融入多做的弹性盒子，对一行使用中失效

• align-content: stretch 初始值 子元素被拉申融入器皿
• align-content: center 坐落于容器核心
• align-content: flex-start 坐落于开始
• align-content: flex-end 坐落于末尾
• align-content: space-between 坐落于各行各业中间留出空白器皿
• align-content: space-around 坐落于各行各业之前之后中间留出空白器皿

给子元素

align-self 界定flex子项独立在侧轴（纵坐标）方向上的对齐方式

• auto 初始值 原素传承它父器皿align-items属性 要是没有父器皿乃为stretch 拉申
• stretch 原素被拉申融入器皿
• center 原素坐落于容器核心
• flex-start 原素坐落于容器开始
• flex-end 原素坐落于容器末尾

order 设定子元素位置 放进前边能设-1

• number 默认设置是0

flex-grow 用以设定或查找弹力盒的拓展比例

• number 默认设置是0
• 设为2得话等同于占2个元素尺寸

flex-shrink 用以设定或查找弹力盒的收拢比例

• number 初始值是1

flex-basis 用以设定或查找弹力盒伸缩式基准值

• auto 初始值
• number 能设长短或是百分数

flex 用以缩写上边的特性

• flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

我的网站将要同歩至腾讯云服务开发者平台，邀请大家一同进驻：cloud.tencent.com/developer/s…