食物菜单列表自动分成两列[关闭]答案

【问题标题】：Food menu list automatically split into 2 columns [closed]食物菜单列表自动分成两列[关闭]
【发布时间】：2020-02-19 00:18:34
【问题描述】：

我想实现一个看起来像这样（屏幕截图）的食物菜单，分为 2 列。

所以问题是：有没有办法让它自动化？只需将食物插入一个列表，它会自动将其分成 2 列。

最好的问候

【问题讨论】：

你是硬编码数据还是接收数组？

标签： html css sass flexbox

【解决方案1】：

您可以使用 flexbox 或 css 属性 column-count 来实现。

请检查这个（列数）：https://www.w3schools.com/cssref/css3_pr_column-count.asp

或者这个（flexbox）：https://flexbox.help/

希望对您有所帮助！

【讨论】：

【解决方案2】：

是的，例如，如果这是一个 React 项目，您只需为菜单项制作一个组件，然后让容器具有弹性。

不管怎样，在 HTML 中，假设你的结构是这样的：

<div class="menu-container">
<div class="menu-item">

</div>
<div class="menu-item">

</div>
<div class="menu-item">

</div>
<div class="menu-item">

</div>
<div class="menu-item">

</div>
<div class="menu-item">

</div>
<div class="menu-item">

</div>
<div class="menu-item">

</div>

那么，对于 css 你只需要：

   .menu-container { 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}

.menu-item {
    flex-basis: 50%;
}

解释如下，父级是一个flexbox，会以行的方式显示元素。

每个子项的 flex-basis 为 50%，这意味着每个项将占用父容器的 50%，之后它将换行。

我推荐这个有用的网站，它很好地解释了 flexbox 的所有最重要的属性

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：