0

@media only screen and (max-width: 1050px) {
  .cout-brand-block {
    height: auto;
	  flex-wrap: wrap;
		align-content: space-between;
	  }
  .brand-block-1,
  .brand-block-2,
  .brand-block-3,
  .brand-block-4 {
  }
}

 /*почему блоки  brand-block не получают вертикальны отступ между друг другом?/*

1
  • почему не получают?
    – Grundy
    15 окт 2018 в 10:03

1 ответ 1

0

Потому что нужно задать display: flex; и фиксированную высоту:

.cout-brand-block {
    height: 300px;
    display: flex;
	flex-wrap: wrap;
	align-content: space-between;
    justify-content: space-between;
    width: 100%;
}

  .brand-block-1,
  .brand-block-2,
  .brand-block-3,
  .brand-block-4 {
    width: 300px;
    height: 50px;
    background: #ccc;
  }
<div class="cout-brand-block">
  <div class="brand-block-1">
    1
  </div>
  
  <div class="brand-block-2">
    2
  </div>
  
  <div class="brand-block-3">
    3
  </div>
  
  <div class="brand-block-4">
    4
  </div>
</div>

P.S: align-content: space-between; только задает положение блоков, но не отступы! Чтобы задать отступы для блоков, используйте margin (внешние отступы) или padding (внутренние отступы). Т.е. например:

  .brand-block-1,
  .brand-block-2,
  .brand-block-3,
  .brand-block-4 {
    margin: 50px;
  }
4
  • В основном файле и стоит фиксированая высота, но в медиа запросе нужна свободная высота, что бы внутренние елементы растягивали контейнер...
    – L1ght_time
    15 окт 2018 в 10:11
  • height: auto высота будет равна высоте всех блоков внутри (с отступами), чтобы она начала растягиваться и появились отступы у блоков им нужно задавать эти отступы!!! Т.е. .brand-block-1, .brand-block-2, .brand-block-3, .brand-block-4 { margin: Xpx Ypx; }. А align-content: space-between; только задает положение блоков, но никак не отступы!
    – SVE
    15 окт 2018 в 10:23
  • 1
    Спасибо большое, получилось!)
    – L1ght_time
    15 окт 2018 в 19:20
  • @L1ght_time Отметьте, пожалуйста, ответ как принятый (зелёная галочка слева от ответа), если он вам помог. 18 окт 2018 в 10:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.