Using a <div> with a click event instead of a real link will:

• Not be accessible to people using a screen reader (it won’t be announced as a link)
• Not be accessible to people navigating with a pointing device (e.g. people who can’t operate a mouse (perhaps due to arthritis)) (the div won’t be in the tab order).
• Not appear as links to search engines (which could impact SEO)

Start by structuring your links with semantic markup. Then sort out your layout with flexbox instead of display: inline.

a {
  display: block;
  padding: 5px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  padding: 0;
}

nav>ul {
  display: flex;
  flex-direction: row;
}

<nav>
  <ul>
    <li><a href="//example.com/">Link 1</a></li>
    <li><a href="//example.com/">Link 2</a>
      <ul>
        <li><a href="//example.com/">Link 2a</a> </li>
        <li><a href="//example.com/">Link 2b</a> </li>
        <li><a href="//example.com/">Link 2c</a> </li>
      </ul>
    </li>
  </ul>
</nav>

@Quentin has effectively handled the why.

You can make an <a> act just like a <div> with a simple:

a {
    display: block;
}

I’m having a really difficult time using flexbox to position my links. It just seems to not work (as an example, see the code below. The links should be below “Link 2” yet they’re below “Link 1”). Perhaps it doesn’t work because I need to make links within divs within links for my code. However the exact same CSS seems to work if I just make everything a div. If I could make all the links just divs with the “onclick” function that links to the page I want it to go to, positioning would be so much easier.
So is there any difference between making a linked tag using “onclick” vs. using ? Will it make any difference on my website?

<a href = "https://www.youtube.com/">Link 1</a>
<div id = "container"><a id = "mainlink" href = "https://www.google.com/">Link 2</a>
   <div id = "content">
      <a href = "https://www.images.google.com/">Images</a>
      <a href = "https://www.news.google.com/">News</a>
      <a href = "https://www.maps.google.com/">Maps</a>
   </div>
</div>

<style>
   #container{
      display: inline;
   }
   #content { 
      display: flex;   
      flex-direction: column;
   }
</style>