*学习笔记

flex 属性

作用在flex容器上                作用在flex子项上

flex-direction                        order

flex-wrap                              flex-grow

flex-flow                               flex-shrink

justify-content                      flex-basis

align-items                           flex

align-content                        align-self

flex容器上的属性

flex-direction：控制子项整体布局方向，是从左往右还是右往左，是从上往下还是下往上。

    取值：row 默认值，显示为行，默认从左往右

               row-reverse 显示为行，但方向和row属性值相反

               column 显示为列

               column-reverse 显示为列，与column方向相反

flex-warp：控制子项整体单行显示还是换行显示

    取值： nowrap： 默认值，表示单行显示，不换行

                warp：宽度不足换行显示

                wrap-reverse：宽度不足换行显示,但是从下往上开始

flex-flow ：是flex-direction和flex-warp的缩写，表示flex布局的flow流动特性。第一个值代表方向，第二个值表示换行，中间用空格隔开。

justify-content  ：决定了主轴方向上子项的对齐和分布方式。

    取值： flex-start：默认值，起始位置对齐

                flex-end：结束位置对齐

                center：居中对齐

                space-between：两端对齐

                space-around：环绕，每个flex子项两侧都环绕互不干扰的等宽空白间距，中间间距不会叠加。

                space-evenly：每个flex子项两侧空白间距完全相等。

align-items：flex子项们相对于flex容器在侧轴方向上的对齐方式

    取值：stretch：默认值，flex子项拉伸

               flex-satrt：表现为容器顶部对齐

               flex-end：表现为容器底部对齐

               center：表现为垂直居中对齐

align-content ：侧轴方向上子项的对齐的方式

               flex-satrt：表现为容器顶部对齐

               flex-end：表现为容器底部对齐

               center：表现为垂直居中对齐

               space-between：两端对齐

               space-around：每一行元素都享有独立不重叠的空白空间

               space-evenly：每一行元素上下等分

flex子项上的属性

    order：可通过设置order改变某一个flex子项的排序位置，所有flex子项的默认order属性值为0。

    flex-grow：扩展flex子项所占据的宽度。扩展所侵占的空间就是除去元素外的剩余的空白间隙，默认值为0。

    flex-shrink：处理当flex容器空间不足时，单个元素的收缩比例，默认值为1。

    flex-basis：定义了在分配剩余空间之前元素的默认大小。

    flex：是flex-grow、flex-shrink、flex-basis的缩写。

    align-self：指控制单独某一个flex子项的垂直对齐方式