Когда гибкий столбец переносится, как я могу сделать так, чтобы второй столбец не занимал всю высоту первого столбца?

Question

Допустим, у меня есть гибкий контейнер с 15 предметами.Если я хочу, чтобы столбец был перенесен так, чтобы 10 элементов находились в первом столбце (например), а 5 - во втором столбце, каждый элемент во втором столбце должен занимать только ту же высоту, что и элементы в первом столбце.Другими словами, 5 элементов не должны занимать столько же места, сколько первый столбец - интервал выглядит просто странно.

Есть ли способ сделать так, чтобы последний элемент в списке отображался только в полпути высоты всего контейнера?

Что бы я хотел:

Item      Item 
Item      Item
Item      Item
Item      Item 
Item      Item
Item      
Item       
Item      
Item  

Что происходит:

Item      Item 
Item      
Item      Item
Item       
Item      Item
Item      
Item      Item 
Item      
Item      Item

Код реагирования / стилизованные компоненты:

  <DailyValuesContainer flexDirection="column" wrap="wrap" justify="space-between">
      <DailyValueItem>
        <DvQuantity>0g</DvQuantity><DailyValue>Saturated Fat</DailyValue>
      </DailyValueItem>
      <DailyValueItem>
        <DvQuantity>0g</DvQuantity><DailyValue>Trans Fat</DailyValue>
      </DailyValueItem>
      <DailyValueItem>
        <DvQuantity>0mg</DvQuantity><DailyValue>Cholesterol</DailyValue>
      </DailyValueItem>
      <DailyValueItem>
        <DvQuantity>7mg</DvQuantity><DailyValue>Sodium</DailyValue>
      </DailyValueItem>
      <DailyValueItem>
        <DvQuantity>11g</DvQuantity><DailyValue>Dietary Fibers</DailyValue>
      </DailyValueItem>
      <DailyValueItem>
        <DvQuantity>8g</DvQuantity><DailyValue>Sugar</DailyValue>
      </DailyValueItem>
      <DailyValueItem>
        <DvQuantity>1%</DvQuantity><DailyValue>Vitamin A</DailyValue>
      </DailyValueItem>
      <DailyValueItem>
        <DvQuantity>4%</DvQuantity><DailyValue>Vitamin C</DailyValue>
      </DailyValueItem>
      <DailyValueItem>
        <DvQuantity>11%</DvQuantity><DailyValue>Calcium</DailyValue>
      </DailyValueItem>
      <DailyValueItem>
        <DvQuantity>34%</DvQuantity><DailyValue>Iron</DailyValue>
      </DailyValueItem>
    </DailyValuesContainer>

 const DailyValuesContainer = styled(FlexContainer)`
  max-height: 170px;

const DailyValueItem = styled(FlexContainer)`
  margin-bottom: 12px;
  height: 12px;
`

const DailyValue = styled.p`
  font-weight: 400;
  font-size: 13px;
  line-height: 15px;
  color: ${colors.primary500};
`
const DvQuantity = styled(DailyValue)`
  width: 45px;
`

Answer 1

Ты ожидаешь так:

#main {
  width: 200px;
  height: 600px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

#main div {
  width: inherit;
  height: 60px;
}

<div id="main">
  <div style="background-color:grey;">item 1 </div>

  <div style="background-color:lightblue;">item 2 </div>

  <div style="background-color:khaki;">item 3 </div>

  <div style="background-color:pink;">item 4 </div>

  <div style="background-color:lightgrey;">item 5</div>

  <div style="background-color:grey;">item 6 </div>

  <div style="background-color:lightblue;">item 7 </div>

  <div style="background-color:khaki;">item 8</div>

  <div style="background-color:pink;">item 9</div>

  <div style="background-color:red;">item 10</div>


  <div style="background-color:grey;">item 1 </div>

  <div style="background-color:lightblue;">item 2 </div>

  <div style="background-color:khaki;">item 3 </div>

  <div style="background-color:pink;">item 4 </div>

  <div style="background-color:lightgrey;">item 5</div>
</div>

Попробуйте этот код:

<DailyValuesContainer>
    <DailyValueItem>
      <DvQuantity>0g</DvQuantity><DailyValue>Saturated Fat</DailyValue>
    </DailyValueItem>
    <DailyValueItem>
      <DvQuantity>0g</DvQuantity><DailyValue>Trans Fat</DailyValue>
    </DailyValueItem>
    <DailyValueItem>
      <DvQuantity>0mg</DvQuantity><DailyValue>Cholesterol</DailyValue>
    </DailyValueItem>
    <DailyValueItem>
      <DvQuantity>7mg</DvQuantity><DailyValue>Sodium</DailyValue>
    </DailyValueItem>
    <DailyValueItem>
      <DvQuantity>11g</DvQuantity><DailyValue>Dietary Fibers</DailyValue>
    </DailyValueItem>
    <DailyValueItem>
      <DvQuantity>8g</DvQuantity><DailyValue>Sugar</DailyValue>
    </DailyValueItem>
    <DailyValueItem>
      <DvQuantity>1%</DvQuantity><DailyValue>Vitamin A</DailyValue>
    </DailyValueItem>
    <DailyValueItem>
      <DvQuantity>4%</DvQuantity><DailyValue>Vitamin C</DailyValue>
    </DailyValueItem>
    <DailyValueItem>
      <DvQuantity>11%</DvQuantity><DailyValue>Calcium</DailyValue>
    </DailyValueItem>
    <DailyValueItem>
      <DvQuantity>34%</DvQuantity><DailyValue>Iron</DailyValue>
    </DailyValueItem>
</DailyValuesContainer>


const DailyValuesContainer = styled(FlexContainer)'
width: 200px;
height: 600px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
flex-direction: column;
 ';    

const DailyValueItem = styled(FlexContainer)'
width: inherit;
height: 60px;
';    

const DailyValue = styled.p'
font-weight: 400;
font-size: 13px;
line-height: 15px;
color: ${colors.primary500};
';

const DvQuantity = styled(DailyValue)'
width: 45px;
';