Can items in order list use flex?

Question

I want to put items(item1, item2, item3) in "li". When I used flex, the prefix disappeared!

(here, I use tailwind v2.2.19)

<ol class="list-decimal">
    <li class="flex">
        <div>item1</div>
        <div>item2</div>
        <div>item3</div>
    </li>
    <li>item</li>
    <li>item</li>
</ol>

then I got ...

I really need the prefix, use grid is not fit for my situation.

please help, thanks!!!

Answer 1

You can add the list-decimal-inside class to the element. This class is provided by Tailwind and will ensure that the prefix is still displayed.

<ol class="list-decimal list-decimal-inside">
    <li class="flex">
        <div>item1</div>
        <div>item2</div>
        <div>item3</div>
    </li>
    <li>item</li>
    <li>item</li>
</ol>

This will ensure that the prefix is still displayed for the first <li> element, even though it uses the flex class. The other <li> elements will continue to display the prefix as normal.

Answer 2

This should be all you need if I understand what you're looking for correctly. Make the div items under flex inline blocks and they won't take up all the space. Instead they will fall inline next to each other as the name indicates.

.flex div {
  display: inline-block;
}

<ol class="list-decimal">
    <li class="flex">
        <div>item1</div>
        <div>item2</div>
        <div>item3</div>
    </li>
    <li>item</li>
    <li>item</li>
</ol>