flex的布局定义:

  • display: flex;

有所区分出,主轴(main-axis)与交叉轴(cross-axis)

1

容器(父元素)有以下六个属性

flex-direction

(row/row-reverse/column/column-reverse)

  • row : 主轴水平,起点左端
  • row-reverse : 主轴水平,起点右端
  • column : 主轴垂直,起点上端
  • column-reverse : 主轴垂直,起点下端

2

flex-wrap

(nowrap/wrap/wrap-reverse)

  • wrap : 当主轴排列不下时,换行
  • nowrap : 不换行
  • wrap-reverse : 换行,但转向的
flex-flow

(flex-flow是flex-direction与flex-wrap的简写形式)

justify-content

: 定义了项目在主轴上的对齐方式
(flex-start/ flex-end/ center/ space-between/ space-around)

  • flex-start : 主轴开始方向对齐
  • flex-end : 主轴结束方向对齐
  • center : 主轴方向居中
  • space-between : 两端对齐,项目间隙相等
  • space-around : 项目两侧间隔相等,间隔是与边框的两倍

3

align-items

:定义了 每行 项目的在侧轴方向上的对齐方式

  • flex-start : 侧轴开始方向对齐
  • flex-end : 侧轴结束方向对齐
  • center : 侧轴居中对齐
  • baseline :项目每一行文字的几线对齐
  • stretch : 项目高度为auto时,占满整个容器

4

align-content

: 定义了容器在侧轴方向上有额外空间时,如何排布每一行

  • felx-start : 侧轴开始方向对齐
  • felx-end : 侧轴结束方向对齐
  • center : 侧轴中心对齐
  • space-between : 与侧轴两端对齐,每行轴线间隔平均
  • space-around : 每根轴线两侧间隔相等
  • stretch : 占满整个侧轴

5

项目(子元素)有以下六个属性

order

:定义了项目的排列顺序,数值越小排列越靠前,默认为0

6

flex-grow

:定义了属性项目的放大比例;
默认为0,即使有剩余空间,也不放大;
如果所有都为1,他们将等分剩余空间;
如果有一个为2,其他为1时,前者占据后者两倍的项目空间;

flex-shrink

:定义了项目的缩小比例,若项目空间不足时,项目将缩小
如果所有都为1,空间不足时,都将等比例缩小;
如果有一个为0,其他为1时,前者空间不缩小,后者等比例均分缩小

7

flex-basis

:定义了在分配多余空间;在分配多余空间之前,项目所占据的主轴空间,根据这个属性,计算主轴是否还有多余空间
可以定义和width和height属性一样的值。

flex

:flex是flex-grow、flex-shrink、flex-basis的缩写

align-self

:定义允许单个项目与其他项目有不一样的侧轴对齐方式,可覆盖align-item

8