flex弹性布局控制换行:flex布局换行间距如何控制?

Flex弹性布局中,可以使用flex-wrap属性来控制子元素的换行方式。该属性有以下三个取值:
 
nowrap:默认值,不换行,子元素会尽量排在一行中。
wrap:换行,当子元素排列不下时会自动换行到下一行。
wrap-reverse:反向换行,和wrap类似,但是子元素会从右往左排列。
例如,下面的CSS代码设置了一个容器,子元素最多可以排列3列,当子元素排列不下时会自动换行到下一行:
 
.container {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: 3;
}
注意,在使用flex-wrap属性时,还需要注意子元素的尺寸和flex-basis属性的设置,以确保能够正确地进行换行布局。
另外,在flex-wrap属性的基础上,还可以使用flex-flow属性来同时设置flex-direction和flex-wrap。该属性的语法为:
 
flex-flow: <flex-direction> <flex-wrap>;
其中,<flex-direction>可以取值为row、row-reverse、column或column-reverse,表示主轴方向的排列方式;<flex-wrap>可以取值为nowrap、wrap或wrap-reverse,表示子元素的换行方式。
 
例如,下面的CSS代码设置了一个垂直方向的容器,子元素最多可以排列2列,当子元素排列不下时会自动换行到下一行:
 
.container {
  display: flex;
  flex-flow: column wrap;
  flex-wrap: 2;
}
需要注意的是,flex-wrap属性和flex-flow属性只对具有多个子元素的容器生效,对单个子元素无效。