Innenpolsterung und Umrandung für eine Flexbox 2x2 Raster

Question

Ich habe ein Problem mit 2x2, das ich mit flexbox versucht habe zu erreichen. Ich versuche so etwas zu erreichen.

Jeder sollte einzelne Gitter gleiche Menge Padding enthalten. Außerdem ist es erforderlich, Grenzen nur innerhalb hinzuzufügen. (Innerhalb des Rasters, wie ein Kreuz)

Dies ist der Code, den ich mir ausgedacht habe, aber es funktioniert nicht richtig.

HTML

<div class="info-box"> 
<div class="info-item grid1"></div> 
<div class="info-item grid2"></div> 
<div class="info-item grid3"></div> 
<div class="info-item grid4"></div> 
</div> 

CSS

.info-box { 
margin: 2rem auto 0 auto; 
text-align: center; 
display: flex; 
flex-wrap: wrap; 
flex-flow: row wrap; 
flex-direction: column; 
.info-item { 
    flex: 1 1 calc(50%); 
    background: $light; 
    &:nth-child(odd) { 
    flex: 0 0 50%; 
    } 
} 
} 

Wie kann ich einen Text innerhalb dieser einzelnen 4 Gitter und etwas Padding haben um ihn herum. Ich versuche auch, die Grenze nur innerhalb hinzuzufügen. Kann mir jemand helfen?

Answer 1

Sie können einfach das Kreuz mit border auf den inneren Elementen und padding auf dem Container erreichen. Sie müssen auch keine Flex-Richtung angeben, in Ihrem Fall sollte es row (der Standardwert) sein. Vergessen Sie nicht, box-sizing: border-box hinzuzufügen, um Überlaufprobleme zu vermeiden.

So können Sie so etwas wie dies versuchen:

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.info-box { 
 
    margin: 2rem auto 0 auto; 
 
    text-align: center; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    border:1px solid; 
 
    padding:50px; 
 
} 
 

 
.info-item { 
 
    flex: 1 1 50%; 
 
    min-height: 100px; 
 
    padding:50px; 
 
} 
 
.grid1 { 
 
    border-right:1px solid; 
 
    border-bottom:1px solid; 
 
} 
 
.grid2 { 
 
    border-bottom:1px solid; 
 
    border-left:1px solid; 
 
} 
 
.grid3 { 
 
    border-top:1px solid; 
 
    border-right:1px solid; 
 
} 
 
.grid4 { 
 
    border-left:1px solid; 
 
    border-top:1px solid; 
 
}

<div class="info-box"> 
 
    <div class="info-item grid1">1</div> 
 
    <div class="info-item grid2">2</div> 
 
    <div class="info-item grid3">3</div> 
 
    <div class="info-item grid4">4</div> 
 
</div>

Oder eine andere Lösung die Verwendung von Grenze zu vermeiden, wird unter Verwendung von Pseudo-Element wie folgt:

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.info-box { 
 
    margin: 2rem auto 0 auto; 
 
    text-align: center; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    border:1px solid; 
 
    padding:50px; 
 
    position:relative; 
 
} 
 
.info-box:before { 
 
    content:""; 
 
    position:absolute; 
 
    background:#000; 
 
    width:2px; 
 
    right:50%; 
 
    margin-right:-1px; 
 
    top:50px; 
 
    bottom:50px; 
 
} 
 
.info-box:after { 
 
    content:""; 
 
    position:absolute; 
 
    background:#000; 
 
    height:2px; 
 
    top:50%; 
 
    margin-top:-1px; 
 
    left:50px; 
 
    right:50px; 
 
} 
 

 
.info-item { 
 
    flex: 1 1 50%; 
 
    min-height: 100px; 
 
    padding:50px; 
 
}

<div class="info-box"> 
 
    <div class="info-item grid1">1</div> 
 
    <div class="info-item grid2">2</div> 
 
    <div class="info-item grid3">3</div> 
 
    <div class="info-item grid4">4</div> 
 
</div>