flex布局各属性介绍

• 在指定父元素中，子元素平分父元素空间
  • 子元素不需要设置宽度（因为要平分父元素宽度），给父元素设置 display:flex 后，给子元素设置 flex:1；即可
• 一句话总结flex布局
  • 通过给父元素添加flex属性，控制子元素的位置和排列方式

• 父元素常见属性——flex-direction

  

  • 元素跟着主轴方向排列
  • 设置完主轴方向之后，侧轴对应生成

• 父元素常用属性——justify-content

  

• 父元素常用属性——flex-wrap

  

  • 在flex布局中，默认子元素是不换行的，如果装不开，会自动缩小元素的宽度，挤在父元素里面

• 父元素常用属性——align-items

  • 如果主轴设置为横向，则 align - items 控制纵向，即 上中下
  • 如果主轴设置为纵向，则 align - items 控制横向，即 左中右
  • align - items : center ; 沿着交叉轴方向水平居中对其
  • align - items : flex-starr; 沿着交叉轴最上方（头部）对其
  • align - items : flex-end; 沿着交叉轴最下方（底部）对其

• 父元素常用属性——align-content

  

  • 注意：设置的是侧轴上的排列方式，只有出现多行（换行）的情况下该属性才生效，单行时不生效

• align-items 和 align-content 的区别

  

• 子元素常用属性 flex

  

  • 1.设置了 flex - basis 后 原给该元素设置的 宽度 将不在生效，以设置的 flex - basis 值为准，flex - basis 设置的就是子元素的基准宽度
    • 设置 如果 flex - basis 设置的是百分比，则以父元素为参考
    • lex-basis 属性指定了flex元素在主轴方向上的初始大小。
    • 如果不使用box-sizing改变盒模型的话，那么这个属性就决定了flex元素的内容的尺寸。
    • 如果设置了flex-basis值，那么元素占用的空间为flex-basis值；
    • 如果没有设置或者设置为auto，那么元素占据的空间为元素的width/height值。
  • 2. flex - grow 子元素不足以填满父元素时使用
    • 如果父元素空间有剩余，会把剩余的总空间按照子元素 flex - grow 设置的总份数进行平分，然后乘以对应 flex - grow 设置的 份数加到原子元素宽度上
    • 如图：父元素宽度400 子元素宽度相加一共 150 所以父元素剩余空间 ：400-150 = 250
    • flex - grow 一共有5份 所以每一份是 250 / 5 = 50
    • 然后乘以对应比例在加到原子元素宽度上
  • 3.flex - shrink 当父元素空间不足的时候对子元素进行缩放
    • 把父元素超出的部分按比例分配给子元素 同上
  • 注意：是子元素分配剩余空间，flex表示子元素所占份数
  • flex 是 flex-gorw flex-shrink flex-basis 的缩写 放大比例 缩放比例 基准值