嵌套的Flexbox網格

Question

我已經構建了一個嵌套的flexbox網格，我將用於單個網關。目前，可能是由於使用了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

在這種情況下，最簡單的是更新網格規則，或者使用一個邊界

.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

像LGSon說更好的使用邊界。問題是輪廓不佔用空間，並且在不同的瀏覽器中具有不同的形狀。 我會做：

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

或

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