0
  • html разметку трогать нельзя.

  • использовать нужно flex-ы.

Первые три блока из разметки html должны быть тремя сверху, остальные три блока должны быть нижними. нужно было их расположить, так как я сделала с помощью флексовского свойства order. Но есть большое НО. В условии сказано, что первые два блока не обязательны, первого может не быть, и второй не должен занимать его место, точно так же второго может не быть, но первый должен оставаться на своем месте, собственно как и третий и все остальные.

.block {
  background: #fcfcfc;
  border-radius: 5px;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.block_item {
  background: red;
  margin: 5px;
}

.item1 {
  width: 129px;
  height: 70px;
  order: 1;
  flex: 0 1 auto;
  align-self: auto;
}

.item2 {
  order: -1;
  flex: 0 1 auto;
  align-self: auto;
  width: 30%;
}

.item3 {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
  width: 30%;
}

.item4 {
  order: 3;
  flex: 0 1 auto;
  align-self: auto;
  width: 50%;
}

.item5 {
  width: 85px;
  height: 50px;
  order: 2;
  flex: 0 1 auto;
  align-self: auto;
}

.item6 {
  width: 100px;
  height: 100px;
  order: 5;
  flex: 0 1 auto;
  align-self: auto;
}
<div class="content">
  <div class="block">
    <div class="block_item item1">Должен быть третим</div>
    <div class="block_item item2">Должен быть первым</div>
    <div class="block_item item3">Должен быть вторым</div>
    <div class="block_item item4">Должен быть пятым</div>
    <div class="block_item item5">Должен быть четвертым</div>
    <div class="block_item item6">Должен быть шестым</div>
  </div>
  <p>Второй контейнер .block, дублирующий первый, только без блока .item3, все сместилось..</p>
  <div class="block">
    <div class="block_item item1">Должен быть третим</div>
    <div class="block_item item2">Должен быть первым</div>
    <div class="block_item item4">Должен быть пятым</div>
    <div class="block_item item5">Должен быть четвертым</div>
    <div class="block_item item6">Должен быть шестым</div>
  </div>
</div>

Блок с классом .block по типу контейнера со статьями, и в следующих контейнерах .block уже изначально в разметке может не быть блока с классом .item2 или .item1.

Вопрос, как это сделать? Если с разметки убираю какой-то из первых блоков, естественно остальные смещаются... И еще важно то, что на мобилках все блоки просто сужаются, но остаются все на своих местах.

1 ответ 1

0

По поводу смещающихся блоков: вариант первый ненужный блок не удалять из разметки а скрывать (через opacity например), или второй вариант - добавлять margin-left:auto второму блоку если убран первый или же margin-right:auto в обратном случае.

По поводу просто сужающихся блоков для мобилки: у вас размеры заданы в процентном соотношении от ширины контейнера, соответственно они при любом разрешении браузера будут занимать заданный % от ширины.... используйте @media запросы для малых размеров браузера и в них задавайте нужные ширины

Ваш ответ

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

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