在UI设计开发中，flex自动换行是一个常用且重要的布局方式。在这篇文章中，我们将从多个方面来探讨flex自动换行的特性和使用方法。

基本特性

1、flex自动换行是针对容器内的内容进行排布，在容器内部自动分配空间。

2、当容器的宽度不足以容纳子元素时，子元素会自动换行到下一行，并按照flex属性进行排列。

3、可以通过设置flex-wrap属性，来控制容器子元素的是否进行换行。

父元素

容器设置 flex

display: flex;

子元素的排布方向（主轴方向） flex-direction

• column-reverse：主轴为垂直方向，起点在下沿。

flex-direction:column-reverse

Y轴，左下对齐排列 外层div固定宽：600px 内层div之和宽度超过600px，将不会换行，备压缩显示

2） column：主轴为垂直方向，起点在上沿。

flex-direction:column

Y轴，左上对齐排列 外层div固定宽：600px 内层div之和宽度超过600px，将不会换行，备压缩显示

3） row（默认值）：主轴为水平方向，起点在左端。

flex-direction:row

X轴，左上对齐排列 外层div固定宽：600px 内层div之和宽度超过600px，将不会换行，备压缩显示

4） row-reverse：主轴为水平方向，起点在右端。

flex-direction:row-reverse

X轴，右上对齐排列 外层div固定宽：600px 内层div之和宽度超过600px，将不会换行，备压缩显示

子元素在容器中的水平分布 justify-content

1. X轴，中心对齐

justify-content: center

2. X轴，左对齐

justify-content: flex-start 或 justify-content: left

3. X轴，右对齐

justify-content: flex-end 或 justify-content: right

4）X轴，两端对齐

justify-content: space-between

4）X轴，分散对齐

justify-content: space-around

子元素在容器中的垂直分布 align-items

1）Y轴，顶部对齐

align-items: flex-star

2）Y轴，底部对齐

align-items: flex-end

3）Y轴，居中对齐

align-items: center

4）Y轴，居中对齐

当子元素未设置高度是沾满整个容器

align-items: stretch

自动换行

1）换行

子元素将按照设置的宽度排列换行

flex-wrap: wrap;

2）不换行

子元素，之和超出父元素宽度，将不按照设置的宽度排列换行压缩

flex-wrap: nowrap;

子元素

flex属性,子元素占比

flex属性的默认值为：0 1 auto （不放大会缩小） flex为none：0 0 auto （不放大也不缩小） flex为auto：1 1 auto （放大且缩小） flex:1===flex:1 1 auto（放大且缩小）

flex: 1 1 auto;

flex: 1 对应的父元素的剩余空间，按照 比例 均分，如果值都一样，均等分

order属性,子元素顺序

order: 1;

align-self属性,子元素垂直分布

》？？？ 这个还有待研究