html - Flex-box 多行。如何使用：flex-wrap：换行？

Question

我必须这样做。适用于宽、中、小屏幕 https://pp.vk.me/c629328/v629328337/21bd7/izp9QG8Qcg4.jpg

这是我的代码

.section-items-container
  display: flex
  justify-content: flex-start
  align-items: stretch  
  flex-flow: row wrap
  @include respond-to(small)
  flex-direction: column   
  @include respond-to(medium)
  flex-direction: row
.item   
  flex-grow: 1  
  @include respond-to(small)
    &:nth-child(4)
      order: 5
  @include respond-to(medium)
    &:nth-child(4)  
      flex-grow: 3

Answer 1

Bootstrap responsive-utilities是最好的实现方式。您可以根据所需的视口断点使用 .visible-* 和 .hidden-* 类。

Answer 2

  .section-items-container
    display: flex
    justify-content: flex-start
    align-items: stretch  
    // flex-flow: row wrap
    flex-wrap: wrap
    @include respond-to(small)
      flex-direction: column   
    @include respond-to(medium)
      flex-direction: row
    .item   
      border: $border  
      flex-grow: 1
      flex-shrink: 0
      @include respond-to(small)
        flex-basis: 100%
      @include respond-to(medium)
        flex-basis: 50%
        &:nth-child(4)  
          order: 5
      @include respond-to(wide-screens)
        &:nth-child(1),
        &:nth-child(2),  
        &:nth-child(3)      
          flex-basis: 33%
        &:nth-child(4),  
        &:nth-child(5)  
          flex-basis: 50%
        &:nth-child(4)  
          order: 4