Как расположить блоки?

241

06 ноября 2018, 13:40

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.

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

Answer 1

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

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