ネストされたフレックスボックスグリッド

Question

私は個別のゲートウェイ用に使用するネストされたフレックスボックスグリッドを構築しました。現在、おそらくoutlineが使用されているため、各コンテナ内のコンテンツは、各ゲートウェイを囲む空白に跨っており、各div間のスペースとして機能します。

グリッド間隔を処理するより良い方法がありますが、コンテンツがdivアウトラインに重なっていないことを確認できますか？私は問題を説明するJSFiddleを含んでいます（二次ゲートウェイで最もよく見られる）。ここ

JSFiddle：https://jsfiddle.net/graemebryson/6gehj4v7/

HTML

<!-- Product Grid --> 
<div class="flex-grid"> 
    <div class="flex__direction--column"> 
    <div class="flex__direction--row"> 
     <!-- Primary Gateway --> 
     <div class="item item--primary"> 
     <div class="item__description"> 
      <h3>Primary Gateway</h3> 
      <p>It is a long established fact that a reader will be distracted by the readable.</p> 
     </div> 
     </div> 
     <div class="item flex__direction--column"> 
     <!-- Secondary Gateway --> 
     <div class="item item--secondary"> 
      <div class="item__description"> 
      <h4>Secondary Gateway</h4> 
      <p>It is a long established fact that a reader will be distracted by the readable.</p> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="flex__direction--row"> 
      <!-- Tertiary Gateway --> 
      <div class="item item--tertiary"> 
       <div class="item__description"> 
       <h5>Tertiary Gateway</h5> 
       <p>It is a long established fact that a reader will be distracted by the readable.</p> 
       </div> 
      </div> 
      <!-- Tertiary Gateway --> 
      <div class="item item--tertiary"> 
       <div class="item__description"> 
       <h5>Tertiary Gateway</h5> 
       <p>It is a long established fact that a reader will be distracted by the readable.</p> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

SCSSは

// Grid 
.flex-grid { 
    .item { 
    flex: 1; 
    outline: 5px solid white; 
    min-height: 150px; 
    } 
} 

// Set Flex Direction - Column 
.flex__direction--column { 
    display: flex; 
    flex-direction: column; 
    -ms-flex-direction: column; 
    -webkit-flex-direction: column; 
} 

// Set Flex Direction - Row 
.flex__direction--row { 
    display: flex; 
    flex-direction: row; 
    -ms-flex-direction: row; 
    -webkit-flex-direction: row; 
} 

Answer 1

この場合、最も簡単なのは、グリッドのルールを更新し、いずれかの境界線を使用することです

LGSonが良い境界線を使用して言ったように

.flex-grid { 
    .item { 
    flex: 1; 
    min-height: 150px; 
    } 
    .item--primary, .item--secondary, .item--tertiary { 
    border: 2px solid white; 
    } 
} 

またはマージン（fiddle）

スタックは

.flex-grid .item { 
 
    flex: 1; 
 
    min-height: 150px; 
 
} 
 

 
.flex-grid .item--primary, 
 
.flex-grid .item--secondary, 
 
.flex-grid .item--tertiary { 
 
    margin: 2px; 
 
    background: lightgray; 
 
} 
 

 
.flex-grid .item--primary { 
 
    margin-bottom: 0; 
 
} 
 

 
.flex__direction--column { 
 
    display: flex; 
 
    flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    -webkit-flex-direction: column; 
 
} 
 

 
.flex__direction--row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    -ms-flex-direction: row; 
 
    -webkit-flex-direction: row; 
 
}

<!-- Product Grid --> 
 
<div class="flex-grid"> 
 
    <div class="flex__direction--column"> 
 
    <div class="flex__direction--row"> 
 

 
     <!-- Primary Gateway --> 
 
     <div class="item item--primary"> 
 
     <div class="item__description"> 
 
      <h3>Primary Gateway</h3> 
 
      <p>It is a long established fact that a reader will be distracted by the readable.</p> 
 
     </div> 
 
     </div> 
 

 
     <div class="item flex__direction--column"> 
 
     <!-- Secondary Gateway --> 
 
     <div class="item item--secondary"> 
 
      <div class="item__description"> 
 
      <h4>Secondary Gateway</h4> 
 
      <p>It is a long established fact that a reader will be distracted by the readable.</p> 
 
      </div> 
 
     </div> 
 
     <div class="item"> 
 
      <div class="flex__direction--row"> 
 
      <!-- Tertiary Gateway --> 
 
      <div class="item item--tertiary"> 
 
       <div class="item__description"> 
 
       <h5>Tertiary Gateway</h5> 
 
       <p>It is a long established fact that a reader will be distracted by the readable.</p> 
 
       </div> 
 
      </div> 
 
      <!-- Tertiary Gateway --> 
 
      <div class="item item--tertiary"> 
 
       <div class="item__description"> 
 
       <h5>Tertiary Gateway</h5> 
 
       <p>It is a long established fact that a reader will be distracted by the readable.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

スニペット。問題のアウトラインはスペースを取らず、さまざまなブラウザで異なる形をしています。 は私がするだろう：私はそう単純で明白な何かを見落としているだろうと考えているのに苦労してるので

.item { 
    border: 5px solid white; // or transparent 
    overflow-wrap: break-word; 
    } 

または

.item { 
    padding: 5px; 
    outline: 5px solid white; 
    overflow-wrap: break-word; 
    }