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?