Meow Meow - 1 year ago 74
CSS Question

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

, but I find that my approach sizes the
elements to be full-width, rather than how
children would normally be auto-width.

For example:

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

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

Answer Source
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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download