CSS样式——Flex 弹性盒子模型

  • 开启弹性盒子模型

    语法:dispaly:flex
    容器默认以水平轴为主轴,子元素从左往右排列,纵向轴为侧轴

    • 开启弹性盒子模型后对子元素的影响

      1. 所有子元素默认按照主轴从左往右排列
      1. 所有子元素在主轴上没有长度(主轴为水平方向时,没有宽度;主轴为垂直方向时,没有高度)
      2. 所有子元素默认在侧轴上填满长度(侧轴为水平方向时,子元素宽度填满侧轴;侧轴为垂方向时,子元素高度填满侧轴)
      3. 所有子元素在主轴上从主轴开始位置向结束位置堆叠
      4. 所有子元素在侧轴上从侧轴开始位置开始堆叠
      5. 所有子元素默认永不换行,添加元素自动进行均匀挤压,直到子元素内容无法继续挤压,直接溢出盒子
      6. 设置为弹性盒模型后,所有子元素都将自动成为容器成员,并且float、clear、vertical-aligin 样式都会失效
  • 弹性盒子模型作用域父元素上的样式

    • 设置主轴和子元素排列方向:flex-direction

      1. 以水平轴为主轴,从左往右排列:row
      2. 以水平轴为主轴,从右往左排列:row-reverse
      3. 以纵向轴为主轴,从上往下排列:column
      4. 以纵向轴为主轴,从左往右排列:row-reverse
    • 设置主轴方向子元素的排列方式(不改变元素顺序):justity-content

      1. 主轴起始位置对齐:flex-start
      2. 主轴中间位置对齐:center
      3. 主轴结束位置对齐:flex-end
      4. 所有空白填充在两个元素中间(左右两个元素顶格):space-between
      5. 所有空白环绕每个子元素两侧填充:space-around
      6. 空白均分填充在子元素之间(IOS支持,安卓不支持):space-evenly
    • 子元素在侧轴上的排列方式(没有换行的时候只有一行显示):align-items

      1. 侧轴起始位置排列:flex-start
      2. 侧轴中间位置排列:center
      3. 侧轴结束位置排列:flex-end
    • 设置是否换行:flex-wrap

      1. 不换行:nowrap
      2. 换行:wrap
      3. 逆置换行:wrap-reverse
    • flex-directionflex-wrap复合语法:flex-flow: 排列方向 换行方式
    • 设置侧轴的排列方式(设置时需要开启换行,在多行时,每一行都是一个 整体,以一行为一个单位进行设置):align-content

      1. 子元素在侧轴起始位置对齐:flex-start
      2. 子元素在侧轴中间位置对齐:center
      3. 子元素在侧轴结束位置对齐:flex-end
      4. 所有空白填充在两个元素中间(上下两个元素顶格):space-between
      5. 所有空白环绕每个子元素两侧填充:space-around
      6. 空白均分填充在子元素之间(IOS支持,安卓不支持):space-evenly
  • 作用在子元素上的样式

    • 指定子元素对齐方式:align-self

      1. 继承父元素的align-items的对齐方式:auto
      2. 侧轴起始位置对齐:flex-start
      3. 侧轴中间位置对齐:center
      4. 侧轴结束位置对齐:flex-end
    • 设置弹性宽度(当前元素占据除固定宽的元素后剩余部分的比例):flex

      1. 设置后内容会被挤压
      2. 优先挤压设置弹性宽度的元素
      3. 弹性宽度元素宽度挤压到极限在挤压固定宽度的宽
      4. 直到所有不能被挤压,直接溢出
    • 子元素排列顺序(数字越小,排在越前面):order
    • 子元素的放大比例(默认为0):flex-grow
    • 子元素的缩小比例(默认为1):flex-shrink
    • 分配空余空间之前子元素的默认大小:flex-basis
    • flex-growflex-shrinkflex-basis复合写法
      语法(默认值):flex:0 1l, auto
      值直接写auto表示flex:1 1 auto
      值直接写none表示flex:0 0 auto

你可能感兴趣的