CSS flex布局

1.开启flex布局的元素叫 flex container

2.flex container 里面的直接子元素叫做 flex items

1.开启flex布局

 .box {
        /* 开启flex 布局 
              flex: 块级元素
              inline-flex: 行内元素
        */
        display: flex;
      }

2.flex布局模型

3.flex相关属性

3.1应用在flex container上的CSS属性

• flex-flow 是flex-direction 和 flex-wrap 的复合缩写

• flex-direction 设置主轴的方向

• flex-wrap 设置是否换行

• justify-content 设置主轴上 items 的排列方式

• align-items 设置侧轴上items 排列方式 (单行使用)

• align-content 设置侧轴上 items 的排列方式(多行使用)

3.2应用在 flex items 上的css属性

• flex 定义子项目分配剩余空间，用flex来表示占多少份数。
• flex-grow 决定flex item如何扩展
• flex-basis
• flex-shrink 决定了flex items 如何收缩
• order 设置数值决定flex items 的排布顺序
• align-self 控制flex items 自己在侧轴上的排列方式

3.4 flex-direction设置主轴的方向

• flex items 默认都是沿着main axis(主轴) 从 main start 开始往 卖弄 end 方向排布

• 注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

3.5 justify-content 主轴上 items 排列方式

3.5.1 space-evenly 与 space-around 的区别

space-evenly : flex items与 main start , main end 之间的距离 等于 flex items 之间的距离

space-around: flex items 与 main start ,main end 之间的距离是 flex items 之间距离的一半

3.6 flex-wrap设置是否换行

• 默认情况下，flex-items都排在一条线（又称”轴线”）上。flex布局中默认是不换行的。
• nowrap 不换行
• wrap 换行

3.7 align-items 设置侧轴上items 排列方式 (单行使用)

• 该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用

• normal: 在弹性布局中，效果和stretch一样

• stretch: 当 flex items 没有设置高度 ，那flex items 在侧轴方向的高度 会自动拉伸至填充flex container

• flex-start: 从头开始排列

• flex-endL 从尾部开始排列

• center: 居中对齐

• baseline: 与基线对齐

  3.8 align-content 设置侧轴上items 排列方式（多行使用）

  设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的

  

3.9 flex-flow 属性是flex-direction 和 flex-wrap 的复合属性

flex-flow:row wrap;

4.0 flex-items 常见属性

4.1 order 决定flex items 的排布顺序

• 可以设置任意的整数（正整数，负整数，0）.值越小就排在前面
• 默认值为0

4.2 align-self 控制flex items 自己在侧轴上的排列方式

align-self 属性允许单个item有与items不一样的对齐方式，可覆盖 align-items 属性。

默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

4.3 flex-grow 当flex container 在主轴方向有剩余空间时，决定flex items 如何扩展

只有当flex container 在主轴方向有剩余空间时,flex-grow才会生效

根据flex-grow 设置的数值 将剩余的空间进行等分