Question

我已经构建了一个嵌套的flexbox网格，我将用于各个网关。目前，大概是由于使用outline，每个容器内的内容都会运行到每个网关周围的空白区域（并被其隐藏），这些空间充当每个网格之间的间距。

有没有更好的方法来处理网格间距，这可以让我确保内容不会延伸到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）

Stack snippet

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

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

嵌套的Flexbox网格

2 个答案: