Foros del Web » Creando para Internet » CSS »

Alineación con Flexbox

Estas en el tema de Alineación con Flexbox en el foro de CSS en Foros del Web. Hola a tod@s, estoy realizando una web con Flexbox, y me gustaria mover un elemento. Os cuento. Si visitais la web http://sergibeltran.com/projects/sergi2/ (Mirar en Chrome, ...
  #1 (permalink)  
Antiguo 17/10/2013, 23:28
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 13 años, 5 meses
Puntos: 4
Alineación con Flexbox

Hola a tod@s, estoy realizando una web con Flexbox, y me gustaria mover un elemento. Os cuento.

Si visitais la web http://sergibeltran.com/projects/sergi2/ (Mirar en Chrome, aun no he añadido prefijos) vereis que a la derecha hay una imagen donde sale un iPad y un iPhone. A la izquierda un apartado donde hay escrito I made, y más abajo hay otro elemento que pone Tags.

Bien, a mi me gustaría que Tags estuviera justo debajo de I made. Pero me es imposible, I made ocupa el mismo alto que la imagen. En el inspector de Chrome he cambiado el alto de Tags a una altura inferior (200px), pero el elemento tags sigue sin subir.

Este es el código:

Código HTML:
Ver original
  1. <section class="wrapper">
  2.     <section class="logo-name">
  3.         <div class="logo"><img src="img/fustot/fustot-icon.png"></div>
  4.         <h2>Fustot</h2>
  5.     </section>
  6.     <div class="work"><img src="img/fustot/fustot.jpg"></div>
  7.     <section class="made">
  8.         <span>I made:</span>
  9.         <ul>
  10.             <li><i class="icon-edit"></i><span>Design</span></li>
  11.             <li><i class="icon-code"></i><span>Development</span></li>
  12.         </ul>
  13.     </section>
  14.     <section class="tags">
  15.         <span>Tags:</span>
  16.         <ul>
  17.             <li>Wordpress</li>
  18.             <li>HTML5</li>
  19.             <li>Jquery</li>
  20.             <li>Responsive</li>
  21.             <li>CSS3</li>
  22.             <li>PayPal</li>
  23.         </ul>
  24.     </section>
  25.     <a class="visit" href="#">Visit the website</a>        

Código CSS:
Ver original
  1. .wrapper{
  2.     display: flex;
  3.     flex-wrap: wrap;
  4.     .logo-name{
  5.         width: 100%;               
  6.         .logo{
  7.             flex: 3;
  8.             padding: .5em 0 0 .5em;
  9.             img{
  10.                 border: 1px solid #eee;
  11.             }
  12.         }
  13.         h2{
  14.             flex: 8;
  15.             padding: 0 0 0 .5em;
  16.             font-size: 2rem;
  17.         }
  18.     }
  19.     .work{
  20.         width: 50%;
  21.         order: 2;
  22.     }
  23.     .made{
  24.         width: 50%;
  25.         order: 1;
  26.         ul{
  27.             li{
  28.                 border-bottom: 1px dashed #eee;
  29.                 padding: .5em 0;
  30.                 display: flex;
  31.                 flex-direction: row;
  32.                 box-orient: horizontal;
  33.                 align-items: center;
  34.                     i{
  35.                     font-size: 2rem;
  36.                     padding: 0 0 0 1em;
  37.                 }
  38.                 span{
  39.                     padding: 0 0 0 1em;
  40.                 }
  41.             }
  42.             li:last-of-type{
  43.                 border-bottom: none;
  44.             }
  45.         }
  46.     }
  47.     .tags{
  48.         width: 50%;
  49.         order: 3;
  50.         ul{
  51.             display: flex;
  52.             flex-wrap: wrap;
  53.             margin: .5em 0 0 0;
  54.             li{
  55.                 background-color: #eee;
  56.                 padding: 0 .7em;
  57.                 font-size: .85rem;
  58.                 margin: 0 .5em .5em 0;
  59.                 }
  60.             }
  61.         }
  62.         .visit {
  63.             width: 100%;
  64.             order: 4;
  65.             padding: .5em;
  66.             text-align: center;
  67.             color: #7e0822;
  68.         }
  69.     }

Gracias de antemano, saludos!
  #2 (permalink)  
Antiguo 19/10/2013, 01:53
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: Alineación con Flexbox

¿Y si lo metes dentro de section.made no te vale? Vamos, yo haría eso.
  #3 (permalink)  
Antiguo 22/10/2013, 05:22
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 13 años, 5 meses
Puntos: 4
Respuesta: Alineación con Flexbox

Cita:
Iniciado por pzin Ver Mensaje
¿Y si lo metes dentro de section.made no te vale? Vamos, yo haría eso.
Jum....eso se me podría haber ocurrido a mi...en que estaría pensando!

Muchas gracias Pzin, ya lo tengo solucionado, tal y como tu dijiste

Etiquetas: Ninguno
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 02:35.