Nested Flexbox Grid | 易学教程

问题

I've built a nested flexbox grid that I'll be using for individual gateways. Currently, presumably due to the use of outline, the content within each container is running over into (and being hidden by) the whitespace surrounding each gateway, which acts as spacing between each div.

Is there a better way to handle the grid spacing, which allows me to ensure the content doesn't run over into the div outline? I've included a JSFiddle to illustrates the issue (seen best in the secondary & tertiary gateways).

JSFiddle here: 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;
}

回答1:

The simplest in this case would be to update the grid rule and either use a border

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

or a margin (fiddle)

Stack snippet

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

回答2:

Like LGSon said better use a border. Problem is outlines does not take space and have different shapes in different browsers. I would do:

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

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

来源：https://stackoverflow.com/questions/44654101/nested-flexbox-grid

标签

css

css3

Sass

flexbox