margin-top, только когда гибкий элемент обернут


88

У меня есть гибкий контейнер с двумя гибкими элементами. Я хочу установить верхний край на втором, но только когда он завернут, а не на первой гибкой линии.

По возможности я хочу избегать использования медиа-запросов.

Я думал, что нижняя граница первого элемента может быть решением. Однако он добавляет пространство внизу, когда элементы не обернуты, так что та же проблема.

Это мой код:

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


1
Вопросы, требующие помощи по отладке («почему этот код не работает?») Должны включать в себя желаемое поведение, конкретную проблему или ошибку и кратчайший код, необходимый для их воспроизведения, в самом вопросе. Пожалуйста, не злоупотребляйте блоками кода, чтобы обойти это требование .
Paulie_D

Проблема в том, что в этом случае мне не нужно было объяснять больше кода, поэтому это проблема StackOverflow, если требуется код блока.
Мануэль Ди Иорио

1
Вопрос в полезности для будущих пользователей SO. Если ваша ссылка JSfiddle исчезла, ваш пост по сути бесполезен. Вот почему SO запрашивает код ... в идеале - в фрагментах кода, доступных вам при создании вопроса.
Paulie_D

Хорошо, я понял, редактирую вопрос для соблюдения правил;)
Мануэль Ди Иорио

Ответы:


174

Вы можете добавить некоторое количество margin-topкак к гибким элементам, так и отрицательное margin-topв таком же количестве к гибкому контейнеру.

Таким образом, отрицательная граница гибкого контейнера нейтрализует поля гибких элементов в первой строке, но не поля элементов, перенесенных на другие строки.

.container {
  margin-top: -30px;
}
.item-big, .item-small {
  margin-top: 30px;
}


114
О, CSS, почему ты так поступаешь со мной
Sanderfish,

3
Отличный ответ
плов

3
Это не работает, если у контейнера есть фоновый цвет или рамка
Франк ван Вейк,
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.