flex布局属性有哪些?(flex布局容器常用属性介绍)

flex布局属性有哪些？在使用的过程中任何一个容器都可以指定为Flex布局.{display:flex},行内元素也可以使用Flex布局.box{display:inline-flex;}。当我们将容器设置为Flex布局以后，容器当中的子元素的float、clear等属性会失效。采用Flex布局的元素，称为Flex容器，他的所有子元素自动成为容器成员，称为Flex项目。

flex布局容器常用属性介绍，容器flex布局属性有下面6个属性：

flex-direction、flex-wrap、flex-flow、align-items、align-content、justify-content

一.flex-direction属性：

决定主轴的的方向，即容器中项目排列的方向，一般默认的方向是横排列。

flex-direction有四个属性，它的属性值如下：

1、row（默认值）：主轴水平方向，起点在左端，

2、row-reverse：起点在右端，

3、column：主轴为垂直方向，起点在上沿，

4、column-reverse：起点在下沿。

二.flex-wrap属性：

设置子元素的换行方式，它的属性值如下：

1、nowrap（默认值）：不换行 一直往后排（当父布局空间不足时，也不会换行此时可能就会有内容被遮挡看不见了）

2、wrap：换行，子元素往后排，当空间不足时会另起一行从新排列

3、wrap-reverse：换行，跟wrap相似 只是行会从下往上开始

三.flex-flow属性：

它是flex-direction属性和flex-wrap的简写。默认值（row nowrap）为横向排列不换行。

四.justify-content属性：

表示子元素在主轴方向上的对齐方式，它的属性值如下：

1、flex-start（默认值）：左对齐

2、flex-end：右对齐

3、center：居中

4、space-between： 两端对齐

5、sp-ace-around：两端对齐但是项目边上的元素和容器之间有空隙

五.align-items属性：

表示子元素在交叉轴上的排列方式，它的属性值如下：

1、flex-start：交叉轴的起点对齐

2、flex-end：终点对齐

3、center：中点对齐

4、baseline：项目的第一行文字基线对齐

5、stretch（默认值）：当项目未设置高度的时候，占满这个容器的高度

六.align-content属性：

它定义了多根轴线的对齐方式。当项目只有一根轴线的时候，该属性是不起作用的，它的属性值如下：

1、flex-start：交叉轴的起点对齐，

2、flex-end：终点对齐，

3、center：中点对齐，

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

5、space-around：每根轴线两侧的间隔都相等，因此，轴线之间的间隔比轴线与边框的间隔大一倍，

6、strentch（默认值）：轴线占满整个交叉轴。