flex

flex

概念

  采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

  块状元素display:flex;行内元素display:inline-flex。
  示意图

  容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
  项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

容器的属性

  flex-direction定义某个轴了主轴的话,那么另外的一个轴就是交叉轴

  • flex-direction 主轴的方向即项目排列方向

    • 主轴为水平方向:row <=> row-reverse 起点分别在左边与右边
    • 主轴为垂直方向:column <=> column-reverse 起点分别在上边与下边
  • flex-wrap 默认情况下,项目都排在一条线上当轴线排不了时

    • nowrap => 不换行
    • wrap <=> wrap-reverse 换行,第一行在下方
  • flex-flow

    • flex-direction(第一个参数主轴的方向)
    • flex-wrap(第二个参数如果项目超出宽度时是否换行)
  • justify-content 主轴上的对齐方式{假设主轴为从左到右}

    • flex-start <=> flex-end (左对齐或者右对齐)
    • center (居中)
    • space-between:两端对齐,项目之间的间隔都相等。
    • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
  • align-items 项目在交叉轴上如何对齐

    • flex-start <=> flex-end
    • center(居中)
    • baseline: 项目的第一行文字的基线对齐。
    • stretch(如果项目未设置高度或设为auto,将占满整个容器的高度)
  • align-content 定义了多跟轴线的对齐方式,如果只有一根轴的话这个属性不起作用

    • flex-start <=> flex-end
    • center
    • stretch
    • space-between
    • space-around

项目的属性

  • order 数值越小排列越靠前默认为0
  • flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
    • 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。
    • 如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
  • flex-shrink 定义项目的缩小比例,默认为1,如果空间不足,该项目将缩小
    • 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。
    • 如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
  • flex-basis 分配多余的空间之前,项目占据的主轴的空间

    • flex-basis:auto || 可以设置宽度高度
  • flex

    • flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
    • 该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)
    • 建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
      align-self(用于搞定单个项目与别的不同)
  • align-self

    • align-self: auto | flex-start | flex-end | center | baseline | stretch;

  转载请注明: 迷一样的自信 flex

 上一篇
ajax ajax
ajaxajax流程第一步 创建XMLHttpRequest对象var request = new XMLHttpRequest(); 第二步 监听XMLHttpRequest对象里面的readystatechang// 用的属性监听 /
2018-04-24
下一篇 
BFC、IFC、GFC、FFC BFC、IFC、GFC、FFC
BFC、IFC、GFC、FFCBFC概念(BFC)  "块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相
2018-04-13
  目录