У меня есть гибкий контейнер с двумя гибкими элементами. Я хочу установить верхний край на втором, но только когда он завернут, а не на первой гибкой линии.
По возможности я хочу избегать использования медиа-запросов.
Я думал, что нижняя граница первого элемента может быть решением. Однако он добавляет пространство внизу, когда элементы не обернуты, так что та же проблема.
Это мой код:
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.item-big {
background: blue;
width: 300px;
}
.item-small {
background: red;
margin-top: 30px;
}
<div class="container">
<div class="item-big">
FIRST BIG ELEM
</div>
<div class="item-small">
SECOND SMALL ELEM
</div>
</div>
Ответы:
Вы можете добавить некоторое количество
margin-top
как к гибким элементам, так и отрицательноеmargin-top
в таком же количестве к гибкому контейнеру.Таким образом, отрицательная граница гибкого контейнера нейтрализует поля гибких элементов в первой строке, но не поля элементов, перенесенных на другие строки.
.container { margin-top: -30px; } .item-big, .item-small { margin-top: 30px; }
Показать фрагмент кода
.container { display: flex; flex-wrap: wrap; justify-content: space-around; margin-top: -30px; } .item-big, .item-small { margin-top: 30px; background: red; } .item-big { background: blue; width: 300px; }
<div class="container"> <div class="item-big"> FIRST BIG ELEM </div> <div class="item-small"> SECOND SMALL ELEM </div> </div>
источник