Can items in order list use flex?-CodePudding

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 >
    <li >
        <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!!!

CodePudding user response：

Giving any display property to a li tag will remove the prefix.

So you can select the items individually and set the display to inline.

.flex div{
  display: inline;
}

CodePudding user response：

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 >
    <li >
        <div>item1</div>
        <div>item2</div>
        <div>item3</div>
    </li>
    <li>item</li>
    <li>item</li>
</ol>