親のフレックス要素の高さと幅を親のフレックス要素の100％の高さと幅で塗りつぶすようにしました。

Question

フレックスボックスを使用してレイアウトを構築しましたが、

縦と横の中央に揃えたいアンカータグがあるパネルがありますが、アンカータグをパネルの幅と高さの100％にしてパネルのどこかをクリックするとリンクテキストをクリックするのではなく、リンクします。

<div class="panel--link panel--one"> 
    <a href="#" class="link"> 
     Panel 1 
    </a> 
</div> 

そしてSCSS：あなたはそれをよりよく理解するように、全体のレイアウトのための私のCodepenを参照してください

.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; 
    } 
} 

はここでパネルのHTMLです！

http://codepen.io/zauber/pen/BpRJQG

ヘルプ

Answer 1

ためのおかげで、恐れてはあまりにもアンカーフレキシボックスを作る...

a{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

、あなたはアンカーの親にalign-items: stretchを追加する必要がいけません。

Answer 2

.content .panel--linkからalign-items: centerを削除し、あまりにも.content .panel--link a.linkflexboxを作り、それを揃える垂直を使用して：

display: flex; 
justify-content: center; 
align-items: center; 

をデモは、以下を参照してください：答えを

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>