Question

我正在使用弹性网格来布置信息。我想突出显示网格中的一个单元格，以便通过调整相应单元格的高度使其突出。然而，我的尝试还没有达到，因为调整一次细胞的特性会因此影响周围的细胞。

在我的小提琴下面，我在.highlighted内有一个我想改变的课程.flexbox-2。基本上，第二列的row 1将具有比第一列和第三列更高的高度，但所有边框仍将对齐。我正在考虑应用position: absolute并在那里更改其CSS，但这并不能证明是富有成效的。我想知道是否还有其他路线可供选择。

Check this jsfiddle

代码：

* {
  box-sizing: border-box;
}

body {
  font-family: helvetica, serif;
}

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}

.flex {
  display: flex;
  flex-direction: column;
}

.flex-row {
  flex: 1;
  border: 1px solid;
}

.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
}

.flexbox-2 {
  -webkit-flex: 1;
  border: solid 3px green;
  height: 200px;
  margin-left: 10px;
  position: relative;
}

.highlighted {
  position: absolute;
  border: 1px solid yellow;
  padding-top: 20px;
}

.flexbox-3 {
  -webkit-flex: 1;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flex flexbox-1">
    <div class="flex-row">row 1</div>
    <div class="flex-row">row 2</div>
    <div class="flex-row">row 3</div>
  </div>

  <div class="flex flexbox-2">
    <div class="flex-row highlighted">row 1</div>
    <div class="flex-row">row 2</div>
    <div class="flex-row">row 3</div>
  </div>

  <div class="flex flexbox-3">
    <div class="flex-row">row 1</div>
    <div class="flex-row">row 2</div>
    <div class="flex-row">row 3</div>
  </div>
</div>

Answer 1

如果您希望第一行突出显示其他两列，则可以使用否定margin-top：

.highlighted {
  border: 1px solid yellow;
  margin-top: -10px;
  padding-bottom: 10px;
}

Working Example

柔性网格内柔性元件的控制高度，不影响周围元素

1 个答案: