1

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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Meow
  • 1,610
  • 1
  • 14
  • 18
  • Why are you "exploring" something that is not semantically correct? I'm just wondering? – junkfoodjunkie Nov 15 '16 at 18:57
  • And, btw, you need to also use `nav a { flex: 1 1 0; }` or similar to get them to flex properly. Also, unless you set a specific width, of course they will fill the width of `nav` - that's what flex-elements do. – junkfoodjunkie Nov 15 '16 at 18:57
  • Hey junkfoodjunkie, This may ultimately be quite a trivial point, but ordinarily I would nest my `ul` within a `nav` for further semantic clarity, but it would also lead to extra DOM nesting. This would basically be a way to achieve `menu` before the spec is actually approved. Ideally, I'd have a parent element of `menu` with children of `items`. – Meow Nov 15 '16 at 18:59
  • Or just get rid of the ` – junkfoodjunkie Nov 15 '16 at 19:01
  • @Meow The `` tag does not replace ` – Ricky Ruiz Nov 15 '16 at 20:11

1 Answers1

1
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.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701