5

Usando divs con display:flex quisiera que los dos elementos que van a tener dentro ocupasen el 50% de la pantalla respectivamente, pero no lo consigo modificando la propiedad flex-grow. He probado a jugar un poco con los valores de dicha propiedad y nada. Actualmente tengo el código

    .cabecera{
      width:100%;
      height:auto;
      display:flex;
      flex-direction:row;
      justify-content: flex-start;
      align-items: center;
    }
    .item-flex{
      flex-grow: 50%; /* realizando pruebas */
    }
    .item-primero{background:yellow;}/*background pruebas*/
    .item-second{background:blue;}/*background pruebas*/
<div class="cabecera">
  <div class="item-flex item-primero">
    este es mi item primero
  </div>
  <div class="item-flex item-second">
  este es mi segundo
  </div>
</div>

Para conseguirlo ¿qué tendría que jugar con la propiedad flex-basis?

0

4 respuestas 4

5

En esta pregunta he visto la respuesta, y he copiado el css -> flex: 0 1 50%; en tu item-flex

.cabecera{
      width:100%;
      height:auto;
      display:flex;
      flex-direction:row;
      justify-content: flex-start;
      align-items: center;
    }
    .item-flex{
      
      flex: 0 1 50%;


    }
    .item-primero{background:yellow;}/*background pruebas*/
    .item-second{
      background:blue;
     text-align: right;
     }/*background pruebas*/
<div class="cabecera">
  <div class="item-flex item-primero">
    este es mi item primero
  </div>
  <div class="item-flex item-second">
  este es mi segundo
  </div>
</div>

2
  • Justo había encontrado también ahora cómo usarlo, muchas gracias! Ahora me surge una duda...el item-segundo habría forma de que su alineación sea a la derecha? Sería usar el text-align:right; ¿?
    – Marcos
    Commented el 20 feb. 2017 a las 9:39
  • @Marcos si, he actualizado mi respuesta para que añada ese css. Un saludo
    – lois6b
    Commented el 20 feb. 2017 a las 9:42
3

Haciendo más pruebas creo que he encontrado con lo que buscaba.

Estaba aplicando la propiedad errónea, tenía que establecer a la caja la propiedad flex-basis.

El resultado queda así

.cabecera{
  width:100%;
  height:100px;
  background:#FFF;
  display:flex;
  flex-direction:row;
  justify-content: flex-start;
  align-items: center;
}
.item-flex{
  flew-grow:1;
  flex-basis:46%;
  padding:0 2%;
}
.item-primero{
  background:yellow;
}
.item-second{
  background:grey;
  color:#FFF;
  text-align:right;
}
<div class="cabecera">
  <div class="item-flex item-primero">
    este es mi item primero
  </div>
  <div class="item-flex item-second">
  este es mi segundo  
  </div>
</div>

3

Puedes usar flex:1 y ese div tendra el ancho restante. es decir si tu .item-primero tiene ancho 30%, el otro div tendra ancho 70%

.cabecera{
  display:flex;
 }
   
  .item-primero{
  width: 50%;
  background-color: yellow;
  float: left;
}

.item-second{
  background-color: blue;
  float: right;
  flex:1;
}
<div class="cabecera">
  <div class="item-flex item-primero">
    este es mi item primero
  </div>
  <div class="item-flex item-second">
  este es mi segundo
  </div>
</div>

si hubiera 3 elementos y el primero fuera 50% , el segundo flex: 1y el tercero flex: 1 ... significaria que quedarian 50% , 25% y 25% ?

.cabecera{
  display:flex;
 }
   
  .item-primero{
  width: 50%;
  background-color: yellow;
  float: left;
}

.item-second{
  background-color: blue;
  float: right;
  flex:1;
}
.item-tercer{
  background-color: green;
  float: right;
  flex:1;
}
<div class="cabecera">
  <div class="item-flex item-primero">
    este es mi item primero
  </div>
  <div class="item-flex item-second">
  este es mi segundo
  </div>
  <div class="item-flex item-tercer">
  este es mi tercer
  </div>
</div>

10
  • 1
    mola! si hubiera 3 elementos y el primero fuera 50% , el segundo flex: 1y el tercero flex: 1 ... significaria que quedarian 50% , 25% y 25% ?
    – lois6b
    Commented el 20 feb. 2017 a las 16:12
  • 1
    @lois6b ya edite mi respuesta, con un ejemplo de tu pregunta Commented el 20 feb. 2017 a las 16:17
  • niceee. gracias ^^ parece que mi logica no era enrebuscada xD
    – lois6b
    Commented el 20 feb. 2017 a las 16:18
  • Uhm...estoy empezando a usar el tema del display:flex y viendo el código que usas @x-rw ¿por qué usar float:left en el 1º elemento? Quiero decir, en vez de aplicar también un display:flex
    – Marcos
    Commented el 21 feb. 2017 a las 15:20
  • @Marcos simplemente es para posicionar al lado izquierdo, y float:right para el lado derecho Commented el 21 feb. 2017 a las 15:37
0

Sí que puedes lograrlo con "flex-grow", pero estableciéndolo en el atajo "flex". Quedaría de esta forma.

.item-flex{
    flex: 1;
}

Al usar flex-grow de esta manera, el valor numérico viene a actuar como un valor con unidad fr, pero sin ella. Si se presenta el caso en que quieres distribuir desigualmente el espacio, asignando un 66.6% a un lado y 33.3% al otro, puedes lograrlo con lo siguiente:

.elemento1 {
    flex: 2;
}
.elemento2 {
    flex: 1;
}

Así puedes ir variando los valores y espacios a distribuir.

Nótese que, al igual que cuando se usa fr, se suman los valores de todos los elementos que pertenecen a ese espacio con tal de calcular el total a repartir, y tomarán la parte que la propia propiedad indique. Para el ejemplo 66 y 33, el total a repartir son 3 partes, y el elemento1 tomará 2 de ellas, mientras que el elemento2 tomará solo 1.

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.