Foros del Web » Creando para Internet » CSS »

duda con Flexbox

Estas en el tema de duda con Flexbox en el foro de CSS en Foros del Web. Hola, estoy comenzando con flexbox pero los conceptos aunque parecen entendibles a la primera, veo que no. Me estoy haciendo un lío para hacer un ...
  #1 (permalink)  
Antiguo 15/05/2018, 04:19
 
Fecha de Ingreso: julio-2008
Mensajes: 247
Antigüedad: 10 años, 5 meses
Puntos: 9
Información duda con Flexbox

Hola, estoy comenzando con flexbox pero los conceptos aunque parecen entendibles a la primera, veo que no. Me estoy haciendo un lío para hacer un header.

Os pongo una imagen que he hecho a fin de que veáis más rápido lo que pretendo:

https://ibb.co/c6ZMrJ

Lo único que resaltar es que el contenedor padre debe ocupar todo el ancho disponible. Y el div izquierdo debería desaparecer cuando se redimensione la pantalla pero con eso no hay problema.

Estoy intentando de todo; He empleado por ejemplo:
Código:
.flex-header-container {
  display: flex;
  flex-wrap:nowrap;
  padding-right: 7%;
  padding-left: 7%;
  color: #FFBA00;
  background-color: #732C7B;
  border-bottom: #ffffff 2px solid;
}
.logo-container{
  flex: 1 1 auto;
  border-style: solid;
}
.logo-img-item{
  background: black;
  border-style: solid;
}
.logo-name-item{
  background: black;
  border-style: solid;
}
.user-welcome-container{
  flex: 4 1 auto;
  align-self: stretch;
  text-align:right;
  border-style: solid;
}
.user-welcome-item{
  background: black;
  border-style: solid;
}
.user-img-container{
  flex: 1 1 auto;
  align-self: stretch;
  border-style: solid;
}
.user-img-item{
  background: black;
  border-style: solid;
}
.user-img-item{
  width: 140px;
  background: black;
  border-style: solid;
}
Código:
<header>
<div class="flex-header-container">
  <div class="logo-container">
      <div class="logo-img-item">logo_img.item</div>
  <div class="logo-name-item">logo_name.item</div>
  </div>
  <div class="user-welcome-container">
     <div class="user-welcome-item">user_welcome.item</div>
   </div>
   <div class='user-img-container'>
     <div class='user-img-item'>user_img.item</div>
   </div>
</div>
</header>
Pero ahí el problema (a parte de que es un código desastre xD con infinitos div) es que el div central aunque es mayor que los otros, ocupa todo el espacio central. Lo solucionaría con un margen pero al redimensionar pantalla o desbordar si quisiera, se desnudara todo.

¿Alguna solución para hacer lo expuesto en la imagen?
P.D: Los tamaños de las cajas o divs de la imagen son aproximados... me da igual el tamaño. Tan solo busco margen a los lados, y una caja a la izquierda y otras dos a la derecha (y que una de estas dos sea mas grande que la otra). No sé si me explico, quizás con la imagen quede más claro.


Un saludo.
__________________
"La diversidad de opiniones crean una perspectiva capaz de ver todas las caras del objeto"

Última edición por winjose; 15/05/2018 a las 04:24
  #2 (permalink)  
Antiguo 18/05/2018, 12:41
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.193
Antigüedad: 10 años, 9 meses
Puntos: 1017
Respuesta: duda con Flexbox

Y el div izquierdo debería desaparecer cuando se redimensione la pantalla pero con eso no hay problema.

No veo las medias query, sin ellas no podemos saber en que te equivocaste.

Para la estructura que muestras lo puedes simplificar con
HTML
Código HTML:
Ver original
  1.   <a href="#">Logo</a>
  2.   <nav>Menu</nav>
  3.   <form action="#">Buscador</form>

SCSS
Código CSS:
Ver original
  1. header{
  2.   display:flex;
  3.   width:100%;
  4.   padding:0 7%;
  5.   box-sizing:border-box;
  6.   a{
  7.     background:#f02;
  8.     width:150px;
  9.   }
  10.   nav{
  11.     background:#03f;
  12.     width:100%;
  13.   }
  14.   form{
  15.     background:#7ff;
  16.     width:100px;
  17.   }
  18. }
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Etiquetas: auto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:22.