flex 布局 弹性布局

flex 布局

    2 flex 弹性 布局   ====================================
    任何一个元素都可以指定 为 flex   其中 项目-儿子 可以指定宽高
    父亲 指定 flex  后  子元素的 float clear vertical-align 失效;
    父亲  容器   儿子 项目
    儿子 指定  flex 后作为容器  宽度与父亲一致

    主轴      针对每行 每行看成一个整体  整体内 元素安规则排序 紧贴一起 左右 或者 居中等等
    侧轴单行  针对主轴的行  行看成一个元素  该元素自己排列
    侧轴多行  针对多行 多行看成多个元素 所有元素看成一个整体  整体内 元素安规则排序

    display:flex;   块
    display:inline-flex; 行内
    1 flex-direction:row  默认X轴 为主轴项目排列方向   y轴  既侧轴
    row-reverse 翻转  x轴由右边开始 (左   3 2 1右)
    column  y轴排列 为主轴 这时 X轴  既侧轴   column-reverse同上

    2 justify-content: ;设置    主轴  上项目的排列方式
    flex-start    默认  从头部开始  items紧贴 x轴 既左到右  主轴    左1 2 3
    flex-end     尾部开始          items紧贴 项目没有翻转    主轴   1 2 3右
    center       居中   主轴 居中  items紧贴
    space-around  平局分配  剩余空间   类似margin 中间叠加会多  主轴
    space-evenly  等分  主轴
    space-between 先两边贴边  在分配剩余空间 中间等分  主轴

    3 align-items: ;  侧轴  子项目为  单行  时使用
    stretch / normal  默认 不设置 轴对应的 高  拉的跟父亲一样,设置了高度 不拉伸 是高度决定
    flex-start   flex-end  center
    baseline  基线对齐  里面内 文字的基线要对齐  多行文本 以第一行的基线 为准

    4 align-content: ;  侧轴  子项目为  多行   换行  时使用  单行 无效
    参考 justify-content: ; + stretch--设置了高度 不拉伸 是高度决定
    以行为单位 在 侧轴排列方式1行 2行 3行
    start 上1 2 3  空白下
    end   上 空白 1 2 3下     1行 2行 3行 是一个整体  安规则排序不翻转

    5 flex-wrap: ;
    同一行 多个盒子 放不开 以前会挤下来
    现在 会一行显示 盒子整体 变小  通过设置是否换行  改变
    nowrap  默认不换行
    wrap   自动换行  不改变大小

    6 flex-flow: ; 复合写法 flex-direction + flex-wrap
    flex-flow:column wrap ;

    儿子 项目
    flex 子项  分配剩余空间  占比   类似Android weight
    flex:1;
    flex:0 50%;
    align-self: flex-end; 单独某个子项  自己在侧轴的 排列方式,脱离行 自己在侧轴排序 跟 align-items属性一样
    order: 0; 排列方式   默认0   越小越前  -1 < 0  (item  在 主轴的顺序  默认0 打乱自己写的顺序)
    flex-grow: ;  成长 针对主轴剩余空间 item 小于父亲宽度时  剩余宽度安比例分配  
                  默认0 不分配剩余空间
                  所有的子项 的 flex-grow 值相加 大于1                剩余宽度全部安比例分配
                  所有的子项 的 flex-grow 值相加 小于1（0.1+0.2+0.3）  剩余宽度*0.6 然后 在安比例分配(未充满一行)
    flex-shrink:  收缩   当所有items总宽度大于 父亲时 默认不换行 等比例缩小 开启后 大于空间 收缩比例 同上
    flex-basis:400px 设置主轴元素 大小  默认auto  等于设置的宽度  200px 改为400px

    gap, row-gap, column-gap
    gap属性定义了items之间的空间，并不作用于外边框上。这个属性只定义了items之间的最小间隙，
    如果间隙以某种方式变大(比如像justify-content: space-between;)，那么间隙将只在该空间最终变小的情况下生效。

    */
  flex-direction: column;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: start;
  flex-flow: column wrap;
  flex: 1;
  align-self: flex-end;
  order: 0;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;

  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}