title: How can I make Flexbox Item a hyperlink?
body: <p>I have 3 items (boxes) within my flexbox that I want to use as hyperlinks. However, when I wrap the  in  tags it completely breaks the layout. How can I set each item (box) as a hyperlink so that users can click the entire area and it takes them to another website? As of now, I have the text within the boxes set as links. But I want to use the entire box as a link. </p>
  
  <p>Here is a codepen for it: <a href="https://codepen.io/mrhoward/pen/dqqOxj" rel="nofollow noreferrer">https://codepen.io/mrhoward/pen/dqqOxj</a></p>
  
  <pre><code>   HTML:
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"&gt;
      &lt;link rel="shortcut icon" href="img/misc/favicon.png"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
      &lt;title&gt;Flexbox Problem.&lt;/title&gt;
      &lt;link href="css/ton.css" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1 class="col"&gt;Each Square as Hyperlink&lt;/h1&gt;
      &lt;h2 class="col"&gt;This is getting annoying&lt;/h2&gt;
      &lt;div class="maincontain"&gt;
        &lt;div class="col gaming"&gt;&lt;a href=""&gt;&lt;h3 class="title"&gt;1&lt;/h3&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class="col music"&gt;&lt;a href=""&gt;&lt;h3 class="title"&gt;2&lt;/h3&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class="col dev"&gt;&lt;a href=""&gt;&lt;h3 class="title"&gt;3&lt;/h3&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
    background: #333;
    color: #fff;
    padding: 20px;
  }
  a {
    text-decoration: none;
  
  }
  
  /* FLEXBOX */
  
  * {
    box-sizing: border-box;
  }
  
  .col {
    padding: 20px;
  }
  
  .maincontain {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: space-between;
  }
  .maincontain .col {
    width: 32%;
    height:400px;
    align-items: stretch;
  
  }
  
  @media only screen and (max-width: 40em) {
    .maincontain {
      flex-direction: column;
      height: 300px;
      margin: 0 0 10px 0;
    }
  }
  
  @media only screen and (max-width: 40em) {
  .maincontain .col {width: 100%;}
  .maincontain h3 { font-size: 1.3vh}
  
  }
  
  
  /* Item Stylig */
  .gaming {
    background: #d836eb;
  
  }
  
  .music {
    background: #0000ff;
  }
  
  .dev {
    background: #00ff00;
  }
  
  /* Font Styling */
  
  h1 {
    font-size:5vw;
    font-family: 'Open Sans', sans-serif;
    font-weight: lighter;
    text-align: center;
    padding: 50px;
  }
  
  h2 {
    font-size:2vw;
    font-family: 'Press Start 2P', cursive;
    text-align: center;
    padding: 0px 0px 20px 0px;
  }
  
  h3 {
    font-size: 1.3vw;
    font-family: 'Press Start 2P', cursive;
    padding-top: 10px;
    object-fit: cover;
  }
  
  .title{
    color: white;
    text-shadow: 1px 1px 4px #000000;
  }
  </code></pre>