Using flexbox to horizontally display a list in mySQL

Question

Using flexbox to horizontally display a list in mySQL

I am currently displaying items from a mySQL database.

Initially, I used tables and it was working perfectly fine.

However, I have now shifted to using flexbox because apparently, tables are not the ideal approach.

Each item is stored in an unordered list.

The issue I am facing is that the list continues to be displayed vertically instead of horizontally across the page.

Does anyone have any simple flex-box list code they could share? Responsive design can wait until I figure this out!

Below is a snippet of the PHP code:

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

css mysql flexbox

Answer 1

Answer №1

If you're in search of a way to align items horizontally, consider using flex-direction: row; for the ul element. Check out this resource for more information: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

However, tables are also effective for displaying data. They can even be made responsive with some CSS adjustments. Give this code snippet a try:

table, tr, td {
    display: block;
}

Remember to share your code so others can better assist you in identifying any issues.

Answer 2

If you're in search of a way to align items horizontally, consider using flex-direction: row; for the ul element. Check out this resource for more information: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

However, tables are also effective for displaying data. They can even be made responsive with some CSS adjustments. Give this code snippet a try:

table, tr, td {
    display: block;
}

Remember to share your code so others can better assist you in identifying any issues.

Answer 3

Answer №2

Main answer

If you want a list to display horizontally, apply the flex properties to the list element, not the individual list items.

For example, if you have a <ul> with <li> items, your HTML code could look like this:

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

Additional notes

The solution above will align the items horizontally but may cause overlap. To prevent this, consider using justify-content: space-around; to evenly space out the items. More options can be found here.

To ensure the items wrap to the next line when reaching the edge of the container, use flex-wrap: wrap;.

These tips should help resolve any layout issues you are facing :)

Answer 4

Main answer

If you want a list to display horizontally, apply the flex properties to the list element, not the individual list items.

For example, if you have a <ul> with <li> items, your HTML code could look like this:

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

Additional notes

The solution above will align the items horizontally but may cause overlap. To prevent this, consider using justify-content: space-around; to evenly space out the items. More options can be found here.

To ensure the items wrap to the next line when reaching the edge of the container, use flex-wrap: wrap;.

These tips should help resolve any layout issues you are facing :)

Using flexbox to horizontally display a list in mySQL

Answer №1

Answer №2

Main answer

Additional notes

Similar questions

Laravel 5 - Mysterious Database Error

Floating Div Elements

Steps for choosing an image and embedding it within a div element

Optimally align child divs within container in row and column layouts

The Youtube Subscribe Embed feature is causing my image to lose its corners

Why isn't this button aligning in the center properly?

Guidelines for displaying JSON data in HTML <ul><li></li></ul> format using jQuery within an ASP.NET environment

Choose and eliminate in one simple query

What could be the issue with this MYSQL DELETE query?

What is the optimal database design for incorporating social login functionality?

Element with adhesive properties alters its color at a particular location

:empty selector for targeting an empty tbody element

Buttons and links with intricate geometries

How can I align divs horizontally within a container using CSS?

Exploring the World of MySQL Joins

Is the float floating within another float?

Craft a stunning transparent border effect using CSS

IE and Chrome are experiencing issues where the radio buttons are disappearing

Can a border-bottom be made the same size as a class it is not linked to in CSS?

What is the best way to display a loading gif during a request being processed?