2

tengo tres divs con posicionamiento flex, cada uno ocupa el 33% del ancho, lo que quiero es que cuando uno de ellos se elimine los otros dos pasen a ocupar el 50% cada uno y cuando uno de los dos que queda se elimine que el restante pase a ocupar el 100% pero no tengo ni idea de como puedo hacer esto ya sea con css o javascript.

Dejo un ejemplo cutre de lo que quiero hacer, es con paint pero no se me ocurría otra de explicarlo: Ejemplo de lo que quiero conseguir

Si pudieseis resolverme la duda os lo agredecería.

body {
height: 20vh;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.div {
    width: 32%;
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 3vw;
    font-weight: 400;
    color: black;
    background-color: red;
    border-radius: 1vw;
    text-transform: uppercase;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="div">Texto1</div>
    <div class="div">Texto2</div>
    <div class="div">Texto3</div>
  </div>
</body>
</html>

5
  • Dejas un ejemplo de lo que quieres hacer, pero pordrías también dejar código de lo que has intentado? o Simplemente quieres que alguien te de el ejercicio resuelto
    – Maida
    Commented el 29 jun. 2022 a las 9:45
  • Código de lo que has intentado, ¿quieres hacerlo con CSS o con JavaScript?, ¿qué tecnologías usas? me falta tanta información que estoy por redireccionarte aqui
    – chikebox
    Commented el 29 jun. 2022 a las 9:46
  • Lo primero no es ningún ejercicio, simplemente estoy aprendiendo por mi cuenta y me ha surgido esta duda, lo único que he hecho es posicionar con flex al 33% pero no se como puedo conseguir el redimensionamiento. Estoy trabajando con React y extraigo los datos que conforman los divs de una API, por lo que cuando me faltan datos no debo pintarlos y los divs deben redimensionarse
    – Mimi
    Commented el 29 jun. 2022 a las 10:01
  • ¿Podrías facilitar una estructura HTML y el CSS de lo que estás intentando? Puedes editar tu pregunta para añadirlo. Si facilitas código ejecutable aumentarás las probabilidades de que alguien se interese por tu problema, lo reproduzca y te aporte una solución.
    – phpMyGuel
    Commented el 29 jun. 2022 a las 10:03
  • Hecho, ahora espero que sea más fácil de entender
    – Mimi
    Commented el 29 jun. 2022 a las 10:14

1 respuesta 1

3

Con flexbox podemos especificar los fragmentos de la fila que queremos que ocupe cada columna. Al dar a las columnas flex: 1 estamos diciendo que queremos que cada columna se reparta el espacio de la fila a partes iguales.

Al haber 3 columnas cada columna ocupará 1/3 del espacio de la fila. Si se borra 1 de las columnas y quedan 2 de ellas, pasarán a ocupar 1/2 del espacio. Si queremos pasar a tener una sola columna, esta ocupará 1/1.

.fila {
  display: flex;
}

.columna {
  flex: 1;
  height: 100px;
  border: 1px solid black;
  margin: 5px;
}
<p>Con 3 columnas</p>
<div class="fila">
  <div class="columna"></div>
  <div class="columna"></div>
  <div class="columna"></div>
</div>

<p>Cuando se borre una, con 2 columnas</p>
<div class="fila">
  <div class="columna"></div>
  <div class="columna"></div>
</div>

<p>Cuando pasemos a tener 1 sola columna</p>
<div class="fila">
  <div class="columna"></div>
</div>

1
  • Justo era lo que necesitaba, mil gracias :D
    – Mimi
    Commented el 29 jun. 2022 a las 10:50

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.