如何让 div 的内容从左到右，然后 drop e 继续从左到右

Posted 2023-03-05

【中文标题】如何让 div 的内容从左到右，然后 drop e 继续从左到右

【英文标题】：How to make the content of a div go from left to right, then drop e continue going left to right

【发布时间】：2022-01-08 02:54:38

【问题描述】：

我有一个代码，我想在其中制作 div 内的内容，从左到右（我使用 Flex-direction: 行），当它到达 div 的限制时，下降并继续这个命令。该顺序应如下所示 (https://i.stack.imgur.com/L97y0.png)，其中的元素按此顺序排列。

我正在使用 MVC 核心，它是一个接受请求并将其显示在屏幕上的系统。

这是 div 的 html

<div class="pedido-tudo">
            @foreach(var pedido in Model)
        
            <div class="pedido-quadrado">
                @pedido.IdPedido
                @pedido.NomeCliente
                @pedido.TelCliente
                @pedido.DataEntrada
                @pedido.HoraEntrada
                @pedido.HoraSaida
                @pedido.TextoStatus
                @pedido.TextoTipoPedido
                    
                @if (@pedido.TextoStatus == "Andamento" && @pedido.HoraSaida == "")
                
                <div class="botoes-cad">
                    <a href="/Pedidos/Update/@pedido.IdPedido" class="btn btn-sm btn-primary" id="finalizar">Finalizar</a>
                </div>
                
            </div>
         
        </div>

div 的 CSS

.pedido-tudo 
    margin-left: 1.5rem;
    width: 60rem;
    max-width: 60rem;
    display: flex;
    flex-direction: row;


.pedido-quadrado
    margin-top: 1rem;
    margin-left: 5.7rem;
    width: 18rem;
    height: 20rem;
    border: 1px rgb(170, 0, 0) solid;
    color: black;
    font-size: 16px;

目前情况如下：

【问题讨论】：

您在寻找the flex-wrap property吗？

【参考方案1】：

如果我认为你说的是​​正确的，你应该使用flex-wrap 属性，这样当父 div 的大小变小时，就会将溢出的项目从顶部推到底部，如果我错了，请回复我

【讨论】：

yesssssssss，这正是我需要的，非常感谢你