0

Buen día comunidad,

tengo un div como contenedor flex, dentro de este div tengo Cards, el asunto es que quiero que el div esté centrado mientras su contenido se mantiene a la izquierda, de momento para centrar el div uso la propiedad

justify-content: center

lo que centra el contenido correctamente sin embargo los objetos cuyo espacio es mayor

import * as React from "react";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import { Box } from "@mui/system";

let arreglo = [1, 2];

const LizardCard = () => {
  return (
    //estas son las cards, o los items del contenedor flexbox los cuales quiero que esten a la izquierda
    <Card sx={{ maxWidth: 345, boxShadow: "0px 2px 5px" }}>
      <CardMedia
        component="img"
        height="140"
        image="https://mui.com/static/images/cards/contemplative-reptile.jpg"
        alt="green iguana"
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          Lizard
        </Typography>
        <Typography variant="body2" color="text.secondary">
          Lizards are a widespread group of squamate reptiles, with over 6,000
          species, ranging across all continents except Antarctica
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">Share</Button>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>
  );
};

const Test = () => {
  return (
    // Este elemento Box de material UI es solo un div.
    // Este div es el contenedor cuyo contenido necesito al centro de la página o bien al centro de otro div
    // Pero que su contenido se mantenga a la izquierda como con flex-start
    <Box
      sx={{
        display: "flex",
        flexFlow: "row wrap",
        justifyContent: "center",
        alignItems: "left",
        gap: "10px",
      }}
    >
      {arreglo.map((x) => {
        return <LizardCard />;
      })}
    </Box>
  );
};

export default Test;

Agrego imágenes de lo que tengo ahora, u cuál es el problema:

Ejemplo del problema

Gracias por su ayuda de antemano.

Como pueden ver la última fila no tiene 3 items por lo que esa fila se centra gracias al justify content, pero si coloco justify-content: flex-start obtengo esto: Ejemplo del problema 2

si ven los items si se van a la izquierda pero... todo el contenedor se va a la izquierda, ahi es donde probé justify-content: center, align-items: flex-start pero tampoco funciona.

6
  • Podrías agregar una imagen de cómo están ahorita y cómo los deseas?
    – Sr1871
    Commented el 25 oct. 2022 a las 16:36
  • Listo, edité el post. Commented el 25 oct. 2022 a las 17:13
  • Entonces quieres que solo los items que tengan menos de 3 elementos se alineen a la izquierda? es decir que la primer fila quede como la primer imagen y la segunda fila quede como la segunda imagen?
    – Sr1871
    Commented el 25 oct. 2022 a las 17:22
  • Si, en ese escenario, caben 3 elementos pero esto depende de la resolución de pantalla, lo que ocurre es que al haber menos de 3 se centran junto con el contenedor. en la segunda imágen ya están a la izquierda pero el contenedor también se fue a la izquierda Commented el 25 oct. 2022 a las 17:36
  • prueba con: alignItems: center; justifyContent: center; flexDirection: column; Commented el 25 oct. 2022 a las 19:25

2 respuestas 2

0

Hay varias formas en la que se podría hacer lo que pides, la que yo ocuparia seria agregar un div extra que se encargue que contener tu lista de elementos, a este div se encargara de centrar toda tu lista de elementos. y

<div
  style={{
    display:'flex',
    justify-content: 'center',
    width: '-webkit-fill-available',
  }}
>
  <Box
    sx={{
      display: "flex",
      flexFlow: "row wrap",
      justifyContent: "flex-start",
      alignItems: "left",
      gap: "10px",
    }}
  >
    {arreglo.map((x) => {
      return <LizardCard />;
    })}
  </Box>
<div>

De esta manera el div se encargara de centrarte la lista y el Box de alinear los elementos al principio como lo deseas.

Nota: Es solo un ejemplo, mas que nada es para que entiendas la idea y puedas implementarlo a tu manera.

2
  • Hola Aldrich, justo esto ya lo había intentado pero no funciona, siempre se va a la izquierda el contenedor. Commented el 25 oct. 2022 a las 18:32
  • Seguramente algo no se debe estar implementando de manera adecuada. Deberías dar mas detalles de tu problema para ayudarte. Commented el 25 oct. 2022 a las 18:47
0

Muchas veces en vez de poner más código es mejor depurar y quitar:

const Test = () => {
  return (
    // Este elemento Box de material UI es solo un div.
    // Este div es el contenedor cuyo contenido necesito al centro de la página o bien al centro de otro div
    // Pero que su contenido se mantenga a la izquierda como con flex-start
    <Box
      sx={{
        display: "flex",
        justifyContent: "center",
        gap: "10px",
      }}
    >
      {arreglo.map((x) => {
        return <LizardCard />;
      })}
    </Box>
  );
};
1
  • 2
    Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 25 oct. 2022 a las 21:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.