У меня есть такая страктура где list = 350px. Я

Question

У меня есть такая страктура где list = 350px. Я

хочу чтобы все элементы внутри items и item-squares были в линию, но при добавлении новых <div class="square"></div> внутрь <div class="item-squares">, <div class="square"></div> переносились на новую строчку если они не умещаются в общем контенере list который равен 350px. Как это сделать?

Я хочу переносить только <div class="square"></div>, но flex-wrap: wrap; переносит весь блок <div class="item-squares"> при его переполнении элементами <div class="square"></div>.

Напрмиер если у нас умещается в линию 40 элементов <div class="square"></div> (которые содержатся по 10 штук в <div class="item-squares">) то при добавлении <div class="square"></div> в любой <div class="item-squares"> должен быть перенос одного <div class="square"></div> на новую строчку так как он не умещается в общем контенере.

<div class="list">
<div class="items">
<div class="item-squares">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="item-squares">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="item-squares">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
</div>

ПАМАГИТЕ!)

#css #frontend #html #programming #russian

0

22.11.2023

1 ответов

95 просмотров

LZD · Accepted Answer

LZD

https://codepen.io/lzd/pen/dyamBdE

0

22.11.2023

169 похожих чатов

У меня есть такая страктура где list = 350px. Я

1 ответов

Похожие вопросы