0
271
ViewsContenedor flexible: ¿hay alguna forma de estirar la altura del primer elemento cuando se envuelve el contenedor?
div { border: 1px solid #d3d3d3; } .flex-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nowrap { flex-wrap: nowrap; } .item { height: 100px; width: 100px; } <div class="flex-container"> <div class="flex-container nowrap"> <div class="item"> item 1 </div> <div class="item"> item 2 </div> </div> <div class="item"> item 3 </div> </div> ¿Hay alguna manera de hacer que algo como esto funcione cuando los artículos se envuelven? Ahora el artículo 3 se ajusta exactamente debajo del artículo 1. Quiero que se ajuste debajo del elemento 2 
Enlace de violín: https://jsfiddle.net/kmajqrsx/
·
Juan Pablo Isaza
2 answers
Answer question0
Agregar margin-left: auto; al último elemento:
MANIFESTACIÓN
div { border: 1px solid #d3d3d3; } .flex-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nowrap { flex-wrap: nowrap; } .item { height: 100px; width: 100px; } .flex-container > .item{ margin-left:auto; } <div class="flex-container"> <div class="flex-container nowrap"> <div class="item"> item 1 </div> <div class="item"> item 2 </div> </div> <div class="item"> item 3 </div> </div>
·
Juan Pablo Isaza
Report
0
Puede intentar lograr esto con margin-left: 100px , donde 100px es el ancho del .item y agregarlo al elemento 3 .
*, ::after, ::before { margin: 0; padding: 0; box-sizing: border-box; } div { border: 1px solid #d3d3d3; } .flex-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nowrap { flex-wrap: nowrap; } :root { --val: 100px; } .item { height: var(--val); width: var(--val); } .flex-container ~ .item { margin-left: calc(var(--val) + 2px); } <div class="flex-container"> <div class="flex-container nowrap"> <div class="item">item 1</div> <div class="item">item 2</div> </div> <div class="item">item 3</div> </div> La segunda solución se ve casi igual que MaxiGui , pero creamos un punto de interrupción con una consulta de medios y establecemos min-content como el ancho.
*, ::after, ::before { margin: 0; padding: 0; box-sizing: border-box; } div { border: 1px solid #d3d3d3; } .flex-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .nowrap { flex-wrap: nowrap; } :root { --val: 100px; } .item { height: var(--val); width: var(--val); } /* 404px is 100px * 2 + 2px lefr-border + 2px right-border */ @media screen and (max-width: 404px) { .flex-container { width: min-content; background-color: aquamarine; } } .flex-container ~ .item { margin-left: auto; } <div class="flex-container"> <div class="flex-container nowrap"> <div class="item">item 1</div> <div class="item">item 2</div> </div> <div class="item">item 3</div> </div>
·
Juan Pablo Isaza
Report
Answer question