css - 如何将较短的 flex 内容拉到上面的行中

Question

对于狭窄的内容我想要这样的布局:

[ CONTENT ONE ] 
[ CONTENT ONE ] 
[ CONTENT TWO ]
[ CONTENT TWO ]
[ CONTENT TWO ]
[ CONTENT TWO ]
[ CONTENT THREE]
[ CONTENT THREE]
[ CONTENT THREE]
[ CONTENT THREE]
[ CONTENT THREE]

但是如果容器变宽我想要:

[ CONTENT ONE ]   [ CONTENT TWO]
[ CONTENT ONE ]   [ CONTENT TWO]
[ CONTENT THREE ] [ CONTENT TWO]
[ CONTENT THREE ] [ CONTENT TWO]
[ CONTENT THREE ]

这种布局可以用 flex 实现吗？我的方式是，在广 Angular View 中，一个与两个高度相同，但我希望能够将三个向上拉，使其位于两个底部之上

Answer 1

是的，您可以使用 flexbox 和 order 属性进行布局。还有别的办法吗？也许。搜索“砌体布局”解决方案；然而，大多数可能会涉及 Javascript 来检测尺寸，而不是纯 css-only。

根据您的具体需要，如果您不能使用媒体查询，那么您将不得不使用 JS 来监控父元素宽度并相应地进行调整。还有关于该主题的其他帖子。

Codepen

#container {
  max-width: 600px;
  display: flex;
  flex-flow: column wrap;
  width: 100%;
  
  /* this is needed to force columns to wrap sideways (to the right),
     otherwise this will always be a straight column */
  max-height: 200px;
    
}

.group {
  padding: 1em;
  max-width: 400px;
}

#group1 {
  background-color: red;
  color: white;
  order: 1;
}


#group2 {
  background-color: green;
  color: white;
  
  /* setting order to 3, which forces this element to the end of the list.
  Since 'column wrap' is set on the container, and it has a max-height, the list wraps horizontally forcing this element to appear on the right side. */
  order: 3;
}


#group3 {
  background-color: blue;
  color: white;
  order: 2;
}

/* example media query, resetting list to regular ordered column */
@media (max-width: 320px) {
  #container {
    
      /* set to normal column view */
      flex-flow: column;
  }
  
  #group2 {
    
    order: 2;
    /* You'll see that group2 and group3 now both have 'order:2', in this case the HTML structure takes precedence. */
  }
}

<div id="container">
  <div id="group1" class="group">
    <div class"item">1A</div>
    <div class"item">1B</div>
  </div>
  
  <div id="group2" class="group">
    <div class"item">2A</div>
    <div class"item">2B</div>
    <div class"item">2C</div>
    <div class"item">2D</div>
  </div>
    
  <div id="group3" class="group">
    <div class"item">3A</div>
    <div class"item">3B</div>
    <div class"item">3C</div>
    <div class"item">3D</div>
    <div class"item">3E</div>
  </div>