我的 flexbox 中有 3 个项目（框），我想用作超链接。但是，当我将 in 标签包装起来时，它完全破坏了布局。如何将每个项目（框）设置为超链接，以便用户可以单击整个区域并将其带到另一个网站？截至目前，我已将框中的文本设置为链接。但我想用整个盒子作为链接。
这是它的代码笔：https ://codepen.io/mrhoward/pen/dqqOxj
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div class="col gaming"><a href=""><h3 class="title">1</h3></a></div>
<div class="col music"><a href=""><h3 class="title">2</h3></a></div>
<div class="col dev"><a href=""><h3 class="title">3</h3></a></div>
</div>
</body>
</html>
CSS：
body {
background: …我正在处理一个页面,我将内容放在样式表的包装器中.然而,包装器的背景并没有出现在内容背后,我无法弄清楚原因.
这是代码片段.
#wrapper {
width: 850px;
margin-top: -44px;
padding: 15px;
background-image: url('http://www.website.com/tumblr/images/contentbg_grey.png') repeat-y center;
border: dashed thin blue;
position: relative;
text-align:center;
}