flex布局

块状元素：display: flex;

行内元素: display: inline-flex;

容器属性

• flex-direction

  • row：默认值，表示沿水平方向，由左到右

  • row-reverse：表示沿水平方向，由右到左

  • column：表示垂直方向，由上到下

  • column-reverse：表示垂直方向，由下到上

• flex-wrap

  • nowrap：表示不换行

  • wrap：正常换行，第一个位于第一行的第一个

  • wrap-reverse：向上换行，第一行位于下方

• flew-flow

  • flex-flow属性是flex-deriction和flex-wrap属性的简写，默认值为[row nowrap];,

• 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：与交叉轴的中点对齐

  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

  • stretch（默认值）：轴线占满整个交叉轴

项目属性

• order

  • order属性设置项目排序的位置，默认值为0，数值越小越靠前

• flex-grow

  • flex-grow属性用来控制当前项目是否放大显示。默认值为0，表示即使容器有剩余空间也不放大显示。如果设置为1，则平均分摊后放大显示

• flex-shrink

  • flex-shrink属性表示元素的缩小比例。默认值为1，如果空间不够用时所有的项目同比缩小。如果一个项目的该属性设置为0，则空间不足时该项目也不缩小

• flex-basis

  • flex-basis属性表示表示项目占据主轴空间的值。默认为auto，表示项目当前默认的大小。如果设置为一个固定的值，则该项目在容器中占据固定的大小

• flex

  • flex属性是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为：0 1 auto；

• align-self

  • align-self属性表示当前项目可以和其他项目拥有不一样的对齐方式。它有六个可能的值。默认值为auto