Estoy utilizando la propiedad display:flex
pero al tener esta estructura:
<div class="cajaFlexible">
<div class="cajaHija"></div>
<div class="cajaHija"></div>
</div>
Y con este css:
.cajaFlexible{display:flex;flex-direction:column;}
.cajaHija{flex:0 1 auto;}
.cajaHija{flex:0 1 auto;}
No consigo que las cajas hijas me ocupen el 100% del ancho del div y no se por qué, he probado varios valores (flex 0 1 100%, y algunos más que no recuerdo) y no me ocupan nunca el 100% del div.
¿Qué propiedad/valor me está faltando?
Código de Ejemplo:
<footer class="pie">
<section class="contenedor">
<article class="pie-flex">
<div class="pie-izquierda">
<figure class="logo-inferior">
<img src="<?php bloginfo('template_url');?>/imagenes/logo-gris.png"/>
</figure>
<div class="contacto">
<p>Aqui van datos de contacto</p>
</div>
</div>
<div class="pie-derecha">
<nav class="menu-inferior">
<p>dato de menu</p>
</nav>
</div>
</article>
</section>
</footer>
CSS para dicha estructura:
.pie-flex {
height: auto;
min-height: 250px;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
justify-content: flex-start;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
color: #9d9d9d;
}
.pie-izquierda {
flex: 0 1 75%;
-webkit-flex: 0 1 75%;
-moz-flex: 0 1 75%;
-ms-flex: 0 1 75%;
-o-flex: 0 1 75%;
text-align: left;
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
justify-content: flex-start;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
}
.pie-derecha{
flex: 0 1 25%;
-webkit-flex: 0 1 25%;
-moz-flex: 0 1 25%;
-ms-flex: 0 1 25%;
-o-flex: 0 1 25%;
}
flex:0 1 100%
y conwidth:100%
y nada. – Marcos el 25 jul. 17 a las 6:18div
en columnas, cambia la alineación de center a strecht:align-items: stretch
. – blonfu el 25 jul. 17 a las 8:06