flex元素强制换行

  要让flex元素强制换行,可以使用flex容器的flex-wrap属性。该属性指定了flex容器内的flex元素是否应该在一行内排列,或者是否应该在多行中排列。
 
  默认情况下,flex-wrap属性的值为nowrap,表示flex元素应该在一行内排列,不进行换行。如果将flex-wrap属性设置为wrap,则表示flex元素可以在多行中排列,但是它们仍然尽可能地保持在一行内。
 
  要强制flex元素换行,可以将flex-wrap属性的值设置为wrap,并且将flex-basis属性的值设置为100%。这样,每个flex元素都会被分配到一行中,并且将强制它们在下一行中排列。
 
  以下是一个示例:
 
  .container{
 
  display:flex;
 
  flex-wrap:wrap;
 
  }
 
  .item{
 
  flex-basis:100%;
 
  }
 
  在上面的代码中,.container是一个flex容器,而.item是flex容器内的flex元素。通过将flex-wrap属性设置为wrap,并将.item的flex-basis属性设置为100%,我们可以强制每个.item元素在下一行中排列。
 
  除了将flex-wrap属性设置为wrap,还可以将flex-wrap属性设置为wrap-reverse,这将导致flex元素从容器底部开始排列,而不是从顶部开始排列。
 
  另外,可以通过在flex容器中使用flex-flow属性来同时设置flex-direction和flex-wrap属性,以便更方便地控制flex元素的布局。flex-direction属性指定flex容器内的flex元素是沿主轴方向排列还是沿交叉轴方向排列,而flex-wrap属性指定flex元素是否应该换行。
 
  以下是一个示例:
 
  .container{
 
  display:flex;
 
  flex-flow:rowwrap;
 
  }
 
  .item{
 
  flex-basis:100%;
 
  }
 
  在上面的代码中,flex-flow:rowwrap同时设置了flex-direction:row和flex-wrap:wrap,这将使得flex元素从左到右排列,同时在必要时换行。