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可以使用这种布局吗？在宽视角下，我的“一”高度与“二”相同，但我希望能够将“三”向上拉，使其高于“二”的底部

Answer 1

是的，您可以使用flexbox和order属性进行布局。还有另一种方法吗？也许。搜索“砌体布局”解决方案；但是大多数可能会使用Javascript来检测尺寸，而不是仅使用CSS。

根据您的特定需求，如果您不能使用媒体查询，则必须使用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>

如何将较短的flex内容拉到上方的行中

1 个答案: