html - 当 flex 列换行时,如何使第二列不占据第一列的全高?
问题描述
假设我有一个包含 15 个项目的 flex 容器。如果我希望列换行,以便 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
React / styled-components 代码:
<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;
`
解决方案
你期待这样吗:
#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;
';
推荐阅读
- swift - Swift - iOS 14 更新后的绘图应用程序问题
- php - Twilio 调用的音频文件编码问题
- azure - 如何在 azure 数据工厂管道中添加验证以检查文件大小?
- python - 在 python/pygame 中输入错误 - 浮点数而不是整数
- time - Onclick 动态表中的当前时间
- java - 如何在关闭应用程序之前保存和恢复位图
- javascript - 在 for 循环中减少方法 - JS
- jupyter-notebook - 在 Jupyter Notebook 中嵌入 CloudApp 映像
- java - 编写一个仅使用 while 循环打印数字金字塔的 java 程序
- laravel - 使用 Backpack for Laravel 使用多个 Guards 进行 Laravel 身份验证