So far I have seen that all examples using flexbox have been used into div elements, both for the container and for the items. For example:

<div class="flex-container">
   <div class="flex-item">One</div>
   <div class="flex-item">Two</div>
   <div class="flex-item">Three</div>
</div>

My question is: Can i use flexbox in any html tag? Imagine that instead of using div tag I want to use ul for creating a navbar, could I use it here as well or should I surround each li with a div tag?

.flex-container { display:flex; }

<nav>
  <ul class="flex-container">
    <li class="flex-item"><a href="#">COURSES</a></li>
    <li class="flex-item"><a href="#">PRICES</a></li>
  </ul>
</nav>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The answer is yes

.flex-container { 
  width: 200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  background-color: aquamarine;
}
.flex-item { margin-right:25px; }
ul {list-style-type:none; }
a { text-decoration:none }

<nav>
  <ul class="flex-container">
    <li class="flex-item"><a href="#">COURSES</a></li>
    <li class="flex-item"><a href="#">PRICES</a></li>
  </ul>
</nav>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Yes, flexbox can be used with any html tag and the <div> is most commonly used as a flex container...You can use display: flex; on a ul, or any other html tag.

kindly upvote :)