0

Необходимо расположить элементы необычным образом (как показано на рисунке), ширина блоков задана width:50%, пытался сделать через flex, но что-то не как не пойму как это сделать, возможно ли это сделать через css?

<div class="wrapper">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
</div>

Важно: блоки могут быть различной высоты.

Расположены должны быть так:

введите сюда описание изображения

8
  • А как Вы пытались сделать через flex? Покажите css
    – Confireus
    26 фев 2020 в 7:44
  • а просто вывести элементы в порядке 1-4. 2-5. 3-6 нельзя?
    – teran
    26 фев 2020 в 7:58
  • @Confireus свет отключили, хотел добавить не успел))) ахах, как только включат скину.
    – AlexKnow
    26 фев 2020 в 7:58
  • @teran количество элементов может быть разным
    – AlexKnow
    26 фев 2020 в 8:02
  • и чего что разным? колонки 2 если, дак надо разделить количество на 2 получив середину m, и брать 1:m+1, 2:m+2
    – teran
    26 фев 2020 в 8:14

4 ответа 4

4

Не нужен никакой флекс:

.wrapper {
  /* you need this: */
  column-count: 2;
}

.box {
  border: 2px solid gray;
  padding: 1em;
  margin-bottom: 10px;
  
  /* and you need this: */
  break-inside: avoid;
}
<div class="wrapper">
  <div class="box">1<br><br><br></div>
  <div class="box">2<br><br><br><br><br></div>
  <div class="box">3<br><br></div>
  <div class="box">4<br></div>
  <div class="box">5<br><br><br></div>
  <div class="box">6</div>
</div>

1

Задай wrapper высоту height чтобы помещались 3 блока, затем используй свойство flex-direction: column и flex-wrap: wrap. Если нет, то нужно пробовать другие способы

1
  • количество элементов и высота блоков могут быть различными.
    – AlexKnow
    26 фев 2020 в 9:36
0

Для display: block; и display: inline-block; существует такое правило как column-count.
Но вроде как это колхоз..

.wrapper {
  display: block;
  width: 100%;
  column-gap: 10px;
  column-count: 2;
  margin-bottom: -10px;
}

.wrapper .box {
  display: block;
  width: 100%;
  height: 30vh;
  border: 2px solid black;
  box-sizing: border-box;
  margin-bottom: 10px;
}
<div class="wrapper">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

2
  • Спасибо, свет отключили, как только включат попробую)
    – AlexKnow
    26 фев 2020 в 8:06
  • к сожаления не подходит, высота блоков может быть разной, обновил картинку
    – AlexKnow
    26 фев 2020 в 9:36
0

Обязательно ли каждый 2 блок должен быть чуть больше первого? Работает внезависимости от количества элементов.

.box {
  border: 1px solid Black;  
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
<div class="wrapper">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
</div>

1
  • это классно, такого раньше не видел, но высота блоков может быть разной, обновил картинку.
    – AlexKnow
    26 фев 2020 в 9:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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