将一个元素设置为伸缩容器通过display属性来实现，其语法为：

display : flex | inline-flex

参数简要说明如下：

• flex：表示将容器设置为块伸缩容器。

• inline-flex：表示将容器设置为内联伸缩容器。
  

flex-direction属性用于创建伸缩容器的主轴，其语法为：

flex-direction : row | row-reverse | column | column-reverse

参数简要说明如下：

• row：表示在ltr排版方式下从左向右排列；在rtl排版方式下从右向左排列。

• row-reverse：与row排列方向相反，在ltr排版方式下从右向左排列；在rtl排版方式下从左向右排列。

• column：表示从上向下排列。

• colunm-reverse：与column排列方向相反，表示从下向上排列。
  

flex-wrap属性用于设置伸缩容器是否换行，即是单行显示还是多行显示。多行显示时，侧轴方向决定了新行堆放的方向。其语法为：

flex-wrap : nowrap | wrap | wrap-reverse

参数简要说明如下：

• nowrap：表示伸缩容器不换行，将单行显示。

• wrap：表示伸缩容器换行，将多行显示。ltr排版下，伸缩项目从左向右排列；rtl排版下，则从右向左排列。

• wrap-reverse：表示伸缩容器换行，将多行显示，但伸缩项目的排列方向与wrap相反。
  

flex-flow是flex-direction和flex-wrap属性的缩写，用于同时定义伸缩容器的主轴和侧轴，默认值是row nowrap。其语法为：

flex-flow : <flex-direction> <flex-wrap>

显式设置伸缩项目在主轴上的对齐方式，可以使用flex-flow属性。当值为row（默认值）时，伸缩项目沿主轴水平排列；值为column时，伸缩项目沿侧轴（垂直于主轴）排列。当row和column属性值后添加后缀“-reverse”时，将会反向排列。

justify-content属性适用于伸缩容器，用来设置伸缩项目沿主轴的对齐方式。当一行中所有的伸缩项目都不能伸缩或可以伸缩但已经达到最大长度时，这一属性才会对伸缩容器的额外空间进行分配。其语法为：

justify-content : flex-start | flex-end | center | space-between | space-around

参数简要说明如下：

• flex-start：表示伸缩项目向一行的起始位置靠齐。

• flex-end：表示伸缩项目向一行的结束位置靠齐。

• center：表示伸缩项目向一行的中间位置靠齐。

• space-between：伸缩项目平均分布在一行中。第一个伸缩项目分布在一行的最开始位置，最后一个伸缩项目分布在一行的终点位置。

• space-around：伸缩项目平均分布在一行中，两端保留一半的空间。

align-items和align-self属性用于设置伸缩项目在侧轴的对齐方式。其中，align-items属性应用于伸缩容器，用于设置伸缩项目行（一行中的所有伸缩项目）在侧轴的对齐方式。align-self属性应用于伸缩项目，用于设置单独的伸缩项目在侧轴的对齐方式，其属性值会覆盖align-items的属性值。align-items的语法为：

align-items : flex-start | flex-end | center | baseline | stretch

参数简要说明如下：

• flext-start：表示伸缩项目在侧轴方向上向起始边靠齐。

• flext-end：表示伸缩项目在侧轴方向上向终点边靠齐。

• center：表示伸缩项目在侧轴方向上向中间靠齐。

• baseline：表示伸缩项目根据伸缩项目的基线对齐。

• stretch：属于默认值，伸缩项目在侧轴方向上拉伸填充整个伸缩容器。

align-self属性的参数与align-items属性一样。对于匿名伸缩项目，align-self的值与其关联的伸缩容器的align-items的值相同。

align-content属性用于对齐伸缩行，当伸缩容器的侧轴还有额外空间时，align-content属性可以用来调整伸缩行在伸缩容器中的对齐方式，即对多行的伸缩项目按行进行对齐。其语法为：

align-content : flex-start | flex-end | center | space-between | space-around | stretch

参数简要说明如下：

• flex-start：表示各行向伸缩容器的起点位置堆叠。

• flex-end：表示各行向伸缩容器的结束位置堆叠。

• center：表示各行向伸缩容器的中间位置堆叠。

• space-between：表示各行在伸缩容器中平均分布。

• space-around：表示各行在伸缩容器中平均分布，在两边各有一半的空间。

• stretch：属于默认值，各行将拉伸以填充额外空间。
  

伸缩布局让伸缩项目的宽度或高度自动填充伸缩容器的额外空间，可以通过flex属性来实现这一点。通过flex属性，伸缩容器可以等比例的按照各伸缩项目的扩展比率或收缩比率来分配额外空间。其语法为：

flex : none | flex-grow | flex-shrink | flex-basis

参数简要说明如下：

• flex-grow：默认值为0，表示伸缩项目的扩展比率。

• flex-shrink：默认值为1，表示伸缩项目的收缩比率。

• flex-basis：默认值我auto，表示伸缩项目的伸缩基准值。

• none：等同于flex-grow值为0，flex-shrink值为0，flex-basis值为auto。

通过对每个伸缩项目设置flex属性，每个伸缩项目将按照其值的占比，在伸缩容器中进行额外空间的分配。

默认情况下，元素按照其在文档流中的结构顺序进行排列。在伸缩布局中，可以通过order属性来改变伸缩项目显示的次序。其语法为：

order : number

通过order属性对每个伸缩项目进行编号，伸缩容器会从序号最小的开始布局。序号相同的伸缩项目则依据其在文档流中的次序进行布局。