思维导图display:flex弹性盒子

theme: channing-cyan

web开发中，弹性盒子是必备的基本知识，我做了一张思维导图，方便你来使用它。你可以收藏下来方便查找

思维导图.jpg

弹性盒子主要可以分为俩类，一个是给父元素添加的，一个是给子元素添加的，下面我用文字来描述他们

给父元素

一共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  默认是0flex-grow  用于设置或检索弹性盒的扩展比率
• number  默认是0
• 设置为2的话相当于占两个元素的大小​flex-shrink  用于设置或检索弹性盒的收缩比率
• number  默认值是1flex-basis 用于设置或检索弹性盒伸缩基准值
• ​auto 默认值
• ​number  可以设置长度或者百分比 flex 用于简写上面的属性
• flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;