CSS как сделать блоки лесенкой по ширине родителя?

Question

[Jawell]

Здравствуйте, как выстроить блоки лесенкой, друг под другом, чтобы они занимали ширину родителя
Красная линия - отступ, как сделать чтобы этот отступ зависел от ширины родителя, т.е. чтобы блоки были ровно по диагонали

Answer 1

[Александр Миранович]

Смотря, что вам и для каких целей надо. Как один из вариантов https://jsfiddle.net/je6mjaae/7/

Comments

[Jawell]

Нужно, чтобы отступ формировался так, что блоки заполняли бы всю ширину родителя

[Александр Миранович]

https://jsfiddle.net/je6mjaae/10/

[Jawell]

Александр Миранович, https://jsfiddle.net/zwfbor1m/1/
Я сделал элемент id wrapper, нужно сделать отступ слева у каждого блока, в зависимости от ширины wrapper

Answer 2

[smyslov-d]

.container {
max-width: 30rem;
display: flex;
flex-direction: column;
}

<div className={styles.container}>
    {items.map((item, indx) => (
      <div
        style={{
          marginLeft: `${24 * indx}px`,
        }}
      >
        {item}
      </div>
    ))}
</div>