Контролировать высоту гибкого элемента в пределах гибкой сетки, не затрагивая окружающие элементы
Я использую гибкую сетку, чтобы выложить информацию. Я хочу выделить одну из ячеек в сетке, чтобы она выделялась для пользователей, регулируя высоту соответствующей ячейки. Тем не менее, мои попытки не зашли слишком далеко, так как настройка свойств одной ячейки, таким образом, повлияет на окружающие ячейки.
В моей скрипке ниже, у меня есть класс .highlighted
в .flexbox-2
что я хотел бы изменить. В основном, row 1
второго столбца будет иметь высоту выше, чем первый и третий столбец, но все границы будут по-прежнему выровнены. Я думал применить position: absolute
и изменить его CSS там, но это не оказывается плодотворным. Мне интересно, есть ли другие маршруты, которые я могу взять.
Код:
* {
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>
1 ответ
Если вы хотите, чтобы первая строка находилась над двумя другими столбцами, вы можете использовать отрицательный margin-top
:
.highlighted {
border: 1px solid yellow;
margin-top: -10px;
padding-bottom: 10px;
}