我已经构建了一个嵌套的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;
}
答案 0 :(得分:1)
在这种情况下最简单的方法是更新网格规则并使用边框
.flex-grid {
.item {
flex: 1;
min-height: 150px;
}
.item--primary, .item--secondary, .item--tertiary {
border: 2px solid white;
}
}
或保证金(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;
}
&#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;
答案 1 :(得分:1)
.item {
border: 5px solid white; // or transparent
overflow-wrap: break-word;
}
或
.item {
padding: 5px;
outline: 5px solid white;
overflow-wrap: break-word;
}