主要答案

Question

我正在回复mySQL数据库中的项目。

我使用表格完美地工作。

现在，我正在尝试使用flexbox，就像表格一样，即使它们看起来很完美，也不是最佳选择。

我将每个项目都放在无序列表中。

列表继续垂直显示每一行，我无法在整个页面上显示它。

有没有人有任何简单的弹性框列表代码？响应是在窗外，直到我开始工作！

这是来自php的示例：

   while($row = $results->fetch_array()) {
       print '<section><ul class="flexcontainer"><li class="flexcontent">
                '.$row["ID"].'
            </li>';

Answer 1

听起来好像你可能正在寻找flex-direction: row;（每个项目）风格的ul。请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

话虽这么说，表格对于数据表示来说非常好。你甚至可以让他们做出回应;试试这个，看看你能做些什么：

table, tr, td {
    display: block;
}

PS：请包含你的代码，这样就无需猜测你在做什么和出了什么问题。

Answer 2

主要答案

对于要水平显示的列表项，您需要将flex属性应用于列表元素，而不是列表项本身。

如果您的<ul>包含<li>，则您的HTML可能如下所示：

<ul style="display: flex; flex-direction: row;">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

附加说明

上面给出的解决方案本身将显示整个页面中的项目，但可能会导致项目重叠。这可以使用例如justify-content: space-around;来处理，这将显示周围具有相等空间的所有项目。可以找到更多选项here。

我还建议使用flex-wrap: wrap;，这样可以确保当物品到达容器边缘时它们会回绕到下一行。

希望这可以解决您的问题：）

mySQL + List - 如何使用flexbox

2 个答案:

主要答案

附加说明