1

Estoy haciendo un ejercicio en el que se me pide que utilice Flexbox en el contenedor para separar uniformemente los div de la tarjeta de información.

He probado con varias opciones, entre ellas justify-content space-between, around, center... y nada, no consigo resolverlo.

El código que me dan es el siguiente:

<div id="info-container">
  <div class="info-card"></div>
  <div class="info-card"></div>
  <div class="info-card"></div>
</div>

Y yo lo que he hecho es esto, a parte de probar otras opciones como he comentado.

#info-container>.info-card {
  display:flex; 
  justify-content:space-around; 
  border-left:10px solid black;
}

Si me podéis ayudar os lo agradecería. Gracias de antemano!

2 respuestas 2

2

La magia de flexbox está saber en cuál elemento aplicar las reglas.

En tu ejemplo, las reglas de flexbox se deben aplicar en el contenedor padre #info-container y a las card solo le aplicas el border-left para diferenciarlas.

#info-container {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.info-card {
  border-left: 10px solid black;
}
<div id="info-container">
  <div class="info-card">1</div>
  <div class="info-card">2</div>
  <div class="info-card">3</div>
</div>

Ya dependiendo de lo que quieras lograr, puedes usar las propiedades space-between, space-around, space-evenly, etc.

#info-container1 {
  padding: 2px;
  margin: 2px;
  display: flex;
  justify-content: space-between;
}

#info-container2 {
  padding: 2px;
  margin: 2px;
  display: flex;
  justify-content: space-around;
}

#info-container3 {
  padding: 2px;
  margin: 2px;
  display: flex;
  justify-content: space-evenly;
}

.info-card {
  border-left: 10px solid black;
}
<div id="info-container1">
  <div class="info-card">1</div>
  <div class="info-card">2</div>
  <div class="info-card">3</div>
</div>
<div id="info-container2">
  <div class="info-card">1</div>
  <div class="info-card">2</div>
  <div class="info-card">3</div>
</div>
<div id="info-container3">
  <div class="info-card">1</div>
  <div class="info-card">2</div>
  <div class="info-card">3</div>
</div>

Y claro que si se puede mejorar el código css anterior, pero solo lo dejé así para mostrarte las diferentes opciones que puedes usar.

2
  • Muchas gracias!al final era como tú decías, además de ser space-evenly en lugar de space-between como había puesto.
    – Sayane
    Commented el 29 oct. 2022 a las 18:48
  • Si gustas, puedes darle click al upvote. Así la pregunta gana relevancia para futuros visitantes y los dos ganamos reputación en la comunidad. :)
    – DjCrazy
    Commented el 29 oct. 2022 a las 19:14
0

Creo que esto es lo que puedes estar buscando...

Le das al contenedor padre la propiedad flex y ,aquí esta el truco, a cada uno de los hijos las propiedades "flex-grow:1;" y "flex-basis:0;"

Con la propiedad flex-grow un contenedor ocupa todo el espacio que tiene disponible. Al hacerlo en los tres estos se reparten el espacio disponible pero en relación con lo que ocupe su propio contenido (el de cada hijo).

Si además le aplicas la propiedad flex-basis, esta determina que tamaño inicial del hijo en relación al espacio disponible en el padre e independientemente de su propio contenido....

Seguramente no me he explicado muy bien, las propiedades flex-grow, flex-basis y flex-shrink están interesantes

#info-container {
    padding: 0;
    margin: 0;
    display: flex;
}
            
.info-card {
    flex-grow:1;
    flex-basis:0;
}
<div id="info-container">
    <div class="info-card"></div>
    <div class="info-card"></div>
    <div class="info-card"></div>
</div>

Al aplicar las dos te saldrá esa separación uniforme que buscas.

Espero que sea de tu utilidad.

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.