Quiero hacer el elemento flexible 3 en una fila y mantener una proporción de 1: 1 al cambiar el tamaño de la ventana.
Aplicación.js
import "./styles.css"; export default function App() { return ( <div className="App"> <div className="container"> <div className="item">123</div> <div className="item">123</div> <div className="item">123</div> <div className="item">123</div> <div className="item">123</div> <div className="item">123</div> <div className="item">123</div> <div className="item">123</div> </div> </div> ); }
estilos.css
.App { font-family: sans-serif; text-align: center; } .container { display: flex; justify-content: flex-start; border: 1px solid orange; flex-wrap: wrap; padding: 1rem; } .item { flex-basis: 30%; border: 1px solid grey; margin: 0.1rem; }
Caja de arena de código:
https://codesandbox.io/s/elegant-hamilton-iiwrh?file=/src/App.js
¿Cómo puedo hacerlo?
¿Qué pasa con el uso del sistema de cuadrícula en su lugar? https://codesandbox.io/s/naughty-ganguly-lzdg9
Más información: https://developer.mozilla.org/fr/docs/Web/CSS/grid
Debería usar display: grid
para .container
y aspect-ratio: 1/1
para .item
.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .item { background-color: #1eaafc; background-image: linear-gradient( 130deg, #6c52d9, #1eaafc 85%, #3edfd7); border-radius: 4px; border: 6px solid #171717; box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%); color: #fff; aspect-ratio: 1/1; }
<div class="container"> <div class="item">123</div> <div class="item">123</div> <div class="item">123</div> <div class="item">123</div> <div class="item">123</div> <div class="item">123</div> <div class="item">123</div> <div class="item">123</div> </div>
La propiedad CSS de relación de aspecto establece una relación de aspecto preferida para el cuadro, que se utilizará en el cálculo de tamaños automáticos y algunas otras funciones de diseño.
Por lo tanto, aspect-ratio:1/1
garantiza que attr.width === attr.height
siempre.
CSS Grid Layout introduce una nueva unidad de longitud llamada fr, que es la abreviatura de "fracción". MDN define la unidad fr como una unidad que representa una fracción del espacio disponible en el contenedor de cuadrícula.
Entonces, para un diseño de 3 columnas, podemos escribir,
grid-template-columns: 1fr, 1fr, 1fr;
La notación de repetición : si se encuentra repitiendo unidades de longitud, use la función CSS repeat()
grid-template-columns: repeat(3, 1fr);