Разделить блоки vue

Question

Привет, друзья! Дайте совет - как это реализовать? Все никак голова не может додумать о правильной реализации.

Можно любой рандомный пример, делиться кодом не могу, к сожалению.

Answer 1

В чем проблема? На скриншотах просто обычная верстка flex с указание всего трех стилей display: flex; flex-direction: column; gap: 10px; Для блоков, которые не растягиваются на всю длину, еще добавить width: fit-content; для item класса.

.container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #1c1c1c;
    padding: 10px;
}
.item {
    display: flex;
    gap: 20px;
    background-color: grey;
    border-radius: 5px;
  width: fit-content;
}
.p-10 {
    padding: 10px;
}
.icon {
    background-color: green;
    border-radius: 5px 0 0 5px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" 
      crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="container">
    <div class="item">
        <div class="icon">
            <div class="p-10">
                <i class="fa fa-id-card" aria-hidden="true"></i>
            </div>
        </div>
        <div class="text p-10">Первый элемент</div>
    </div>
    <div class="item">
        <div class="icon">
            <div class="p-10">
                <i class="fa fa-id-card" aria-hidden="true"></i>
            </div>
        </div>
        <div class="text p-10">Второй элемент</div>
    </div>
    <div class="item">
        <div class="icon">
            <div class="p-10">
                <i class="fa fa-id-card" aria-hidden="true"></i>
            </div>
        </div>
        <div class="text p-10">Третий достаточно длинный элемент</div>
    </div>
</div>

БЛОГ НА HUSL

Разделить блоки vue

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