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…