Стилизация с помощью flex

Question

Мне необходимо расположить элементы как показано на макете

Я попробовал сделать так, но сейчас все элементы вообще на одной строке. Как можно реализовать так, чтобы в каждой строке элементы были расположены как на макете? Вот то что я смог сделать: html

.css-test-list-item
  .css-indicator(:style="{background:colorIndicator}")
  .css-test-left-item
    .css-task-header {{item.taskTemplate.name}}
  .css-test-right-item(:class="{greenStatus: item.taskStatus.name === 'В работе'}") {{statusLabel}}
  .css-test-left-item(style="font-weight: bold") Время до активации:
  .css-test-right-item(style="font-weight: bold") {{timeToActivate}}

Вот сами стили (использую SCSS)

.css-test-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ded7d7;
  padding: 10px;

  .css-indicator {
    position: absolute; 
    top: 0;
    bottom: 0;
    width: 10px;
    margin: 0 -10px;
    height: 98%;
  }
  .css-test-left-item {
    margin-left: 10px;
    order: 1; 
  }

  .css-test-right-item {
    order: 2; 
  }

EL5 И EL7 будут небольшие картинки, остальные элементы текст

Answer 1

.wrapper {
    width: 400px;
    display: flex;
    flex-wrap: wrap;
}

.el {
    flex: 0 0 50%;
    text-align: center;
}

.el5,
.el6,
.el7,
.el8 {
    flex: 0 0 25%;
}

.el5,
.el7 {
    text-align: right;
}

.el6,
.el8 {
    text-align: left;
}

<div class="wrapper">
    <div class="el el1">el1</div>
    <div class="el el2">el2</div>
    <div class="el el3">el3</div>
    <div class="el el4">el4</div>
    <div class="el el5">el5</div>
    <div class="el el6">el6</div>
    <div class="el el7">el7</div>
    <div class="el el8">el8</div>
    <div class="el el9">el9</div>
    <div class="el el10">el10</div>
</div>

БЛОГ НА HUSL

Стилизация с помощью flex

Ответы (1 шт):