I have a layout built using flexbox, but there is one aspect I just can't seem to get to work.
I have panels which have anchor tags in them that I want to be vertically and horizontally centered, but I want the anchor tags to be 100% of the width and height of the panel so that when you click anywhere in the panel it will link you, as opposed to just clicking the link text.
Here is the HTML for a panel:
<div class="panel--link panel--one">
<a href="#" class="link">
Panel 1
</a>
</div>
And the SCSS:
.panel {
box-sizing: content-box;
flex: 1;
border: 3px solid #fff;
padding: 0px;
text-align: center;
}
.panel--link {
@extend .panel;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
a.link {
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-weight: 600;
font-size: 1rem;
letter-spacing: 3px;
flex: 1;
}
}
See my Codepen for the entire layout so you understand it better!
http://codepen.io/zauber/pen/BpRJQG
Thanks for the help
You need to make your anchor display: block or display: inline-block; and then it will accept the width and height values.
An anchor is an inline element by default so you can't add dimensions to it unless you change its display property.
Don't be afraid, make anchor flexbox too:
a {
display: flex;
justify-content: center;
align-items: center;
}
and you should add align-items: stretch
to parent of anchor.
Remove align-items: center
from .content .panel--link
and make .content .panel--link a.link
a flexbox
too and align it vertically using:
display: flex;
justify-content: center;
align-items: center;
See demo below:
body {
height: 800px;
}
.main {
height: 100%;
}
.content {
height: 100%;
border: 20px solid #fff;
display: flex;
box-sizing: border-box;
}
.content .column {
flex-direction: column;
width: 33.33333%;
background: #374550;
display: flex;
}
.content .panel,
.content .panel--link {
box-sizing: content-box;
flex: 1;
border: 3px solid #fff;
padding: 0px;
text-align: center;
}
.content .panel .logo,
.content .panel--link .logo {
margin: 7.5% 0px 0% 0%;
width: 80%;
}
.content .panel .blurb,
.content .panel--link .blurb {
width: 80%;
margin: 7.5% auto 0% auto;
}
.content .panel .blurb h1,
.content .panel--link .blurb h1 {
text-decoration: none;
color: rgba(255, 255, 255, 0.6);
font-weight: lighter;
line-height: 220%;
font-size: 0.85rem;
margin: 0px;
}
.content .panel .tel,
.content .panel--link .tel {
margin: 7.5% auto 5% auto;
}
.content .panel .tel h2,
.content .panel--link .tel h2 {
text-decoration: none;
color: #fff;
font-weight: 500;
font-size: 1.2rem;
margin: 0px;
}
.content .panel--link {
display: flex;
flex: 1;
justify-content: center;
/*align-items: center;*/
text-align: center;
}
.content .panel--link a.link {
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-weight: 600;
font-size: 1rem;
letter-spacing: 3px;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 768px) {
.content .column--two {
order: -1;
}
.content .column--two .panel--two {
order: -1;
}
}
.content .column--two .panel--one {
flex-grow: 1;
}
.content .column--two .panel--two {
flex-grow: 2;
background: #374550;
}
.content .column--two .panel--three {
flex-grow: 1;
}
<main class="content">
<div class="column column--one">
<div class="panel--link panel--one">
<a href="#" class="link">
Panel 1
</a>
</div>
<div class="panel--link panel--two">
<a href="#" class="link">
Panel 2
</a>
</div>
</div>
<div class="column column--two">
<div class="panel--link panel--one">
<a href="" class="link">
Panel 3
</a>
</div>
<div class="panel panel--two">
<div class="blurb">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lectus orci, imperdiet ac auctor non, tristique eget augue. Curabitur quis gravida lorem, sed maximus purus. Nunc sit amet mollis turpis.</h1>
</div>
<div class="tel">
<h2>123 456 789</h2>
</div>
</div>
<div class="panel--link panel--three">
<a href="#" class="link">
Panel 4
</a>
</div>
</div>
<div class="column column--three">
<div class="panel--link panel--one">
<a href="#" class="link">
Panel 5
</a>
</div>
<div class="panel--link panel--two">
<a href="#" class="link">
Panel 6
</a>
</div>
</div>
</main>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With