0
301
Viewscss: cómo hacer que el elemento flexible 3 sea una fila y mantener una proporción de 1: 1 al cambiar el tamaño de la ventana
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?
2 answers
Answer question0
¿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
0
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>relación de aspecto
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.
Unidad 'fr' para diseño de cuadrícula
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);