Как вытащить короткий флекс контент в строку выше

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>