Flexbox justify-content: space-around clickable area is content width only. Could it expand?-CodePudding

I want to distribute menu items evenly, so use justify-content space-around. But clickable area is content width only.

If use pure CSS can expand clickable area? (Project will change menu content in the future.)

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-around;
}

.menu__link {
  display: block;
}

<ul >
  <li ><a  href="#">ABC</a></li>
  <li ><a  href="#">DEFGHI</a></li>
  <li ><a  href="#">JKLMNOPQ</a></li>
  <li ><a  href="#">RSTUV</a></li>
  <li ><a  href="#">WXYZ</a></li>
</ul>

CodePudding user response：

Yet another example.

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

.menu__link {
  display: block;
  border-bottom: 2px solid transparent;
  color: blue;
  text-align: center;
  text-decoration: none;
}

.menu__link:hover {
  border-bottom: 2px solid blue;
}

.menu__item {
  flex: 1;
}

<ul >
  <li ><a  href="#">ABC</a></li>
  <li ><a  href="#">DEFGHI</a></li>
  <li ><a  href="#">JKLMNOPQ</a></li>
  <li ><a  href="#">RSTUV</a></li>
  <li ><a  href="#">WXYZ</a></li>
</ul>

CodePudding user response：

The issue with the code is that, youe li items are not fitting to the space of your ul

Just add flex: 1; text-align: center; to your li items to make the li items grow to the container dimension.

.menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-around;
}

.menu__link {
    display: block;
}

.menu__item {
    flex: 1;
    text-align: center;
}

<ul >
    <li ><a  href="#">ABC</a></li>
    <li ><a  href="#">DEFGHI</a></li>
    <li ><a  href="#">JKLMNOPQ</a></li>
    <li ><a  href="#">RSTUV</a></li>
    <li ><a  href="#">WXYZ</a></li>
</ul>

CodePudding user response：

You can add a padding to both right and left area of your a tag to expand it. I used padding-inline to add 2rem to both. Or you can do it manually by using padding: 0 2rem;, either works. See the snippet below for your reference (added a background-color for you to see the area expanded clearly).

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-around;
}

.menu__link {
  display: block;
  padding-inline: 2rem;
  background: grey;
}

<ul >
  <li ><a  href="#">ABC</a></li>
  <li ><a  href="#">DEFGHI</a></li>
  <li ><a  href="#">JKLMNOPQ</a></li>
  <li ><a  href="#">RSTUV</a></li>
  <li ><a  href="#">WXYZ</a></li>
</ul>

Or as @Nitheesh answered, you can use flex-grow: 1; or flex: 1; for short to expand the menu__item to the available space equally, then add a gap property to the parent container if you want space in-between items. The advantage of this is that you'll have n equal containers.