Dudas sobre Flexbox, problemas para centrar una imagen y otras consulas

matiD · #1 (**permalink**) 03/05/2015, 21:07

Como están? bueno estoy comenzando a utilizar flexbox y estoy haciendo algo muy simple que me ayude a utilizar distintos usos de flexbox.

Antes que nada por favor no miren los colores ni nada por el estilo tengo colores horribles pero que me ayudan a guiarme sobre como quedan las cosas!

Vamos por partes, la primer duda!

Puedo usar Flexbox dentro de Flexbox? o mejor dicho está bien hacerlo? ya que he visto en mis pruebas que puedo pero no se si es correcto o no hacerlo.

Explico el porqué yo tengo un contenedor principal que tiene distintas secciones
por ej.

Código HTML:

Ver original<main>
    <header>
        <figure></figure>
        <nav></nav>
        <form></form>
    </header>
 
    <section>
        <article></article>
        <aside></aside>
    </section>
 
    <section>
        <nav></nav>
        <article></article>
        <article></article>
        <article></article>
    </section>
 
    <footer></footer>
</main>

Ahora bien, yo le doy display flex al main, pero eso me ayuda a manejar todos los hijos directos. es decir en el caso presentado arriba, sería el "header", "section", "section" y "footer"

Pero los hijos de las respectivas 4 secciones presentadas tienen a su vez otros hijos en el caso del header tiene el figure el nav y el form, bueno entonces aquí reside la duda para manejar esos items debo darle la propiedad flex al header, es decir para poder controlar con las propiedades de flexbox todos los hijos de cada sección debo brindar la propiedad flex al padre de cada sección verdad? y aquí la duda planteada al comienzo esto es correcto en la práctica?

por otro lado tengo un problema bastante estupido tengo en la sección header, dentro del figure una imagen la cual quiero reducir al 50% para que en dispositivos retina se vea bien.

Para hacer esto lo que hago es a la imagen en si misma darle un width del 50% pero cuando la imagen se achica el contenedor Figure sigue ocupando el tamaño total de la imagen pero la imagen se encogió por lo tanto no está centrada en la vista.

Voy a poner todas la imagen para explicar mis dudas y luego abajo pongo el código

Y la otra duda aprovechando la imagen ese pequeño formulario con 2 inputs sin el boton submite me gustaría saber como puedo hacer para que se vea uno debajo del otro pero sin utilizar <br> en el código html hay alguna forma de hacerlo directamente en el css?

Código HTML:

Ver original<body>
<main class="container">
 
<header class="header">
    <figure class="header__logo">
        <img class="header__logo__img" src="../imgs/logo_big.jpg" alt="Servicio Técnico">
    </figure>
    <nav class="header__menu">
        <ul>
            <li>Donde Estamos?</li>
            <li>Contacto</li>
            <li>Facebook</li>
        </ul>
    </nav>
    <form action="" class="header__form">
        <label for="orden">Orden:</label><input type="text" value="orden">
        <br />
        <label for="codigo">Código:</label><input type="text" value="codigo">
    </form>
</header>
 
<section class="main_section">
    <article class="cuyotek">
        <h1 class="cuyotek__h1">Servicio Técnico</h1>
        <p class="cuyotek__p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>
    <aside class="cuyotek__aside">
        IMAGEN
    </aside>
</section>
 
<section class="services">
    <nav class="services__nav">
        <ul>
            <li>GAMES</li>
            <li>PHONES</li>
            <li>COMPUTERS</li>
        </ul>
    </nav>
    <article class="services__article">
        <h2 class="services__h2">GAMES</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores dignissimos delectus earum iure reprehenderit doloremque quaerat laudantium corporis explicabo officiis nihil debitis repellendus enim et, ipsam perferendis, minima. Temporibus, adipisci.</p>
    </article>
    <article class="services__article">
        <h2 class="services__h2">PHONES</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores dignissimos delectus earum iure reprehenderit doloremque quaerat laudantium corporis explicabo officiis nihil debitis repellendus enim et, ipsam perferendis, minima. Temporibus, adipisci.</p>
    </article>
    <article class="services__article">
        <h2 class="sservices__h2">COMPUTERS</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores dignissimos delectus earum iure reprehenderit doloremque quaerat laudantium corporis explicabo officiis nihil debitis repellendus enim et, ipsam perferendis, minima. Temporibus, adipisci.</p>
    </article>
</section>
 
<footer class="footer">
    Pie de Página
</footer>
        
</main>
</body>

Código CSS:

Ver originalul, li, figure {
  margin: 0;
  padding: 0; }
 
li {
  background-color: pink;
  display: inline-block;
  list-style-type: none;
  padding: .5em; }
 
.container {
  background-color: olive;
  max-width: 57rem;
  padding: 0.4em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column; }
 
.header {
  background-color: peru;
  padding: 0.4em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column; }
 
.header__logo {
  align-self: center; }
 
.header__logo__img {
  width: 50%; }
 
.header__menu {
  align-self: flex-end; }
 
.header__form {
  align-self: flex-end; }
 
.main_section {
  background-color: red;
  padding: 0.4em; }
 
.services {
  background-color: blue;
  padding: 0.4em; }

Desde ya muchas gracias por su ayuda!!!