弹性盒模型解析

弹性盒模型解析

一、什么是弹性盒模型

    1、弹性盒模型是一种更优秀的布局方式，使用弹性布局模式可
    以控制子元素排列方式，不需要通过计算控制元素间隙。
    2、弹性盒模型本质是通过两轴来控制的，一个是换行轴，一个
    是排列方向，开启弹性模式以后称之为弹性容器，内外边距都可
    以正常使用。
    

---

二、布局的默认方式

    1、display:block 默认是block-block 对外块元素对内块元素
    2、display:inline 默认是inline-inline 对外是行内元素对内行内元素
    3、display:inline-block 对外是行内元素对内是行内元素
    4、display:flex 默认是display:block-flek 对外是块元素对内是弹性盒模型
    5、display:inline-flek 对外是inline对内是弹性盒模型

---

三、弹性盒模型的特点

    1、默认从左往右排列
    2、子元素有了弹性可以自动伸缩
    3、默认不换行，因为换行需要手动控制

---

四、语法与取值(主轴)

    1、父级定义弹性盒模型容器 display:flex; 定义排列方向
    (主轴)flex-direction:row(默认从左到右) row-reverse(从
    右到左排列) culumn(排列从上到下) culumn-reverse(从下到
    上排列)

---

五、换行方式(交叉轴 辅轴)

    1、默认是不换行，并且均分子元素宽高。
    2、flex-warp:warp;(正常换行 向右 向下) flex-
    warp:warp-reverse(反向换行 向上 向左) 默认nowrap不换行。

---

总结:

       1、不管任何时候，主轴永远垂直与交叉轴
       2、flex-warp: 主轴 交叉轴;(是主轴与交叉轴的简写方式)
       3、子元素不设置宽的时候由内容撑开
       4、子元素不设置高的时候等比例填充
       5、不设置宽高由内容撑开

---

六、(justify-centent)主轴的布方案

    1、just-centent:flex-start(默认 主轴的开始位置) 
    2、just-centent:flex-ent(主轴结束的位置)
    3、just-centent:center(主轴元素居中排列)
    4、just-centent:space-around(空白元素均分给子元素并且子元素空白是父元素的两倍)
    5、just-centent:space-between(只有子元素有间距)
    6、just-centent:space-evenly(父元素与之元素间距相等)

七、交叉轴的布局方案

 Ⅰ、align-items(每一个子元素在交叉轴如何对齐的排列方式)
    弹性之一:不换行的时候元素在主轴会挤在一起
    弹性之二:元素在交叉轴方向上其实是有弹性的,当我们不设置高
    度的时候元素的高度会按照行数均分
 Ⅱ、语法及可选值
    1、align-items:stretch(默认值 拉伸)
    2、align-items:flex-start(元素不会拉伸沿着交叉轴开始位
    置对齐)
    3、align-items:flex-end(元素沿着交叉轴终点位置对对齐)
    4、align-items:flex-center(元素沿着交叉轴居中对齐)
    5、align-items:baseline(子元素基线对齐)
    
  Ⅰ、align-content(整体子元素在交叉轴的对齐方式 空白处理 多行元素处理)
  Ⅱ、语法及可选值
    1、align-content:flex-start;(元素在交叉轴开始位置对齐)
    2、align-content:flex-end;(元素在交叉轴位置对齐排列)
    3、align-context:center;(元素在交叉轴中间位置对其排列)
    4、align-content:space-between;(各行在交叉轴空间均分，并且只有子元素有空隙)
    5、align-content:space-around;(各行在交叉轴空间子元素空隙是父元素的两倍)
    6、align-content:space-evenly;(各行在交叉轴上只有子元素有空隙)

---

弹性盒模型之子元素样式

    一、什么是弹性盒模型子元素样式？
        1、弹性盒模型子元素样式是设置在弹性容器里面的子元素样式。
    二、样式语法及可选值
        1、order:1;(默认值0 改变弹性容器里面子元素的位置，
        值越小排在越前面，值相同则按照元素先后顺序)
        2、flex-grow:1;(默认值0 弹性容器子元素的膨胀系数，
        只有多余空间才可以分配，如果值小于1怎按百分比分配大
        于1全部分配)
        3、flex-shrink:1;(默认值0 ，弹性容器子元素的收缩系
        数 值越大收缩越厉害)
        4、flex-basis:0px;(设置子元素在主轴方向上指定长度)
     三、复合样式
        1、flex: 膨胀 压缩 基础;
        2、可选值:
            1、auto（计算值为 1 1 auto）
            2、initial（计算值为0 1 auto）
            3、none（计算值为 0 0 auto）
            4、inherit（从父元素继承）

弹性盒模型之兼容性

    一、旧版本flex写法
        1、最早:display:box;
        2、过度:display:flex box;
        3、标准:display:flex;
    二、兼容写法
        1、-webkit-
        2、....