I have a code where I want to make the content inside the div, go from left to right (which I did using Flex-direction: row) and when it gets to the limit of the div, goes down and continues this order. The order should look like this ( https://i.stack.imgur.com/L97y0.png ) with the elements inside going in this order.
I'm using MVC core, and its a system which accepts requests and shows them on the screen.
Here's the HTML of the div
<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>
the CSS of the div
.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;
}
If what i think you are saying is correct you should use the flex-wrap
property so that when the size of the parent div becomes smaller is pushes the overflowing items from the top to the bottom reply to me if i am wrong
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.