Cada vez que en mi header
(mi contenedor de los div
) pongo display: flex;
, en mi input no puedo usar ningún tipo de width
, ya sea min
, max
o el width
. De hecho, cuando veo el inspeccionar pagina, se marca en violeta el espacio que queda entre elementos, no entiendo porque no lo ocupa.
El div .contenedor
es general, el importante es el .header
, ese es el contenedor de mi barra de navegación que intento hacer. Adjunto mi código:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.contenedor {
width: 100%;
min-width: 100vh;
}
.header {
display: flex; /*Uso en este contenedor el FLEX*/
background-color: #ff0000;
justify-content: space-between;
align-items: center;
padding: 0 20px;
height: 56px;
flex-direction: row;
}
.header .centro input {
min-width: 60%;
padding: 0 15px;
height: 35px;
line-height: 35px;
border: 1px solid #ccc;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
}
<div class="contenedor">
<header class="header">
<div class="start">
<p>hola</p>
</div>
<div class="centro">
<input type="text" placeholder="Buscar">
</div>
<div class="fin">
<p>Adios</p>
</div>
</header>
</div>