我從mySQL數據庫中回顯項目。mySQL +列表 - 如何使用flexbox水平顯示

我使用表格完美工作。

現在，我試圖使用flexbox，顯然，即使它們看起來很完美，表格也不是最好的選擇。

我有一個無序列表中的每個項目。

該列表爲每行垂直顯示，我無法讓它在整個頁面上顯示。

有沒有人有任何簡單的彈性框列表代碼？直到我得到這個工作，響應纔出現在窗口中！

下面是來自PHP的一個樣本：

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

來源

2017-04-10 AlanDodd

由於'flexbox'不能做表格數據不如HTML表可以（而且從來沒有打算其一），你需要我們之前提供渲染結果將能夠提出一個好的解決方案。僅供參考，雖然看起來很完美，但並沒有_tables這樣的東西，但它們並不是要走的路，表格非常好，使用得當，它們有一個_upgrade_，CSS Grid – LGSon

哦，今天可以使用[* * CSS Tables **]（https://www.w3.org/TR/CSS2/tables.html#table-display），可以將其更改爲「flexbox」項或「inline-block」或....好吧，幾乎所有東西 – LGSon

聽起來好像你可能在ul（每個項目）的風格尋找flex-direction: row;。參見：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

這就是說，表格對數據表示來說是非常好的。你甚至可以讓他們敏感;試試看看你能做什麼：

table, tr, td { 
    display: block; 
}

PS：請確定你的代碼，以免人們猜測你在做什麼和錯在哪裏。

來源

2017-04-10 16:52:15 Pharaoh

_請包括你的代碼，所以沒有人猜測_...所以你爲什麼猜測呢？ – LGSon

因爲這似乎是一個合理的猜測;） – Pharaoh

主要回答

對於列表，水平顯示的項目，你將需要彎曲特性應用到列表元素，而不是列表項本身。

如果你有一個包含一個<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;，這將確保物品在到達容器邊緣時將繞到下一行。

希望這會照顧你的問題:)

來源

2017-04-10 17:03:34 yarwest

mySQL +列表 - 如何使用flexbox水平顯示

回答

主要回答

其他注意事項

相關問題