CODEWITHSUNDEEP
htmlcssflexbox
Meow
Meow

Reputation: 1742

Auto-width list of links without use of <ul>

I'm trying to create a list of links for a menu, and I want to explore not using ul or ol, but I find that my approach sizes the a elements to be full-width, rather than how li children would normally be auto-width.

For example:

nav {
  display: flex;
  flex-direction: column;
}

<nav>
  <a>One</a><!-- these <a> children end up being full-width -->
  <a>Two</a>
  <a>Tree</a>
</nav>

Upvotes: 1

Views: 160

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371609

nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* NEW */
}

The default setting is align-items: stretch, which means flex items will expand the full width of the container.

Upvotes: 1

Related Questions