Sie sind auf Seite 1von 38

Layout y posicionamiento de los elementos de

una pagina web.


La mejor forma de posicionar los elementos es usando los
comandos mas bsicos primero como el position, float, clear:
both y el display:table/inline. Ya que estos comandos son
soportados por mas navegadores. Si con estos comandos no
logramos lo que deseamos podemos usar el displey:flex.
Un pxel es un punto en la pantalla de tu computadora.
Especificar los tamaos de la fuente en pxeles es genial
cuando quers que el usuario vea en su pantalla exactamente
lo que diseaste en la tuya, pero se supone que ambas
pantallas tienen el mismo tamao.
Pero, si el tamao de la pantalla del usuario es muy diferente
del de la tuya (como la pantalla de un smartphone)? Ac
aparecen los em. (No los confundas con las
etiquetas <em></em>que usamos para nfasis).
La unidad de tamao de fuente font-size em es una
medida relativa: un em es igual al tamao de fuente
predeterminado en cualquier pantalla que el usuario est
usando. Esto los convierte en algo genial para las pantallas de
los smartphones, ya que no tratan de decirle al
smartphoneexactamente cul debe ser el tamao de la
fuente: sencillamente le indican, "Mir: 1em es el tamao de
fuente que uss casi siempre, as que 2em es el doble de
grande y 0,5em es la mitad de ese tamao". Rem tiene unas
mejores con respecto a em pero hay que saber cuando usar
cada uno.
Ten en cuenta que incluimos tres prrafos diferentes con
font-size 1em, 0,5em, y 2em. Por ahora, us la unidad con la
que te sientas ms cmodo (px o em) ; nosotros solo
queramos que conocieras los em ahora, para que no te
sorprendas cuando los veas ms adelante.

margin: auto; es el estilo que uss para decirle al navegador:


"Asegurate de dejar mrgenes iguales a ambos lados de este
elemento de HTML". Cuando los mrgenes son iguales, el
objeto queda centrado.
Al usar este comando un div de tamao pequeo se centro
horizontalmente en toda la pagina.
text-align: center; se usa para centrar elementos de texto.

Teoria modelo de cajas.


Muy bien! Ahora que sabs todo acerca de CSS, es hora de
conocer la ltima (pero no por eso la menos importante) pieza
del rompecabezas: el posicionamiento.
Si sabs controlar la posicin de los elementos de HTML
podrs tener mucho ms control del aspecto de tus pginas.
Tus <div> ya no estarn una encima de la otra. (Salvo que
quieras que lo estn.)
Como lo mencionamos, los elementos estn ubicados dentro
de la pgina en lo que se conoce como modelo de caja de
CSS. Cada elemento de HTML es como una pequea caja o
contenedor que encierra las imgenes y el texto que
especifiques.
Observ la imagen que est en la ventana de Resultados: as
es como se ve el modelo de caja. (Veremos los detalles de los
mrgenes, los bordes y el relleno en la siguiente seccin.)

Propiedad Position.
Position:static.
static (esttico) es el valor por defecto. Un elemento
con position: static; no est posicionado en ninguna forma en
especfico. Se dice que un elemento static, est no
posicionado y un elemento con valor establecido de position
est posicionado.
El valor static corresponde al posicionamiento normal y es
el que los navegadores aplican por defecto a todos los
elementos de una pgina. En este caso, para mostrar cada
elemento slo se tiene en cuenta si es un elemento de bloque
(<div> y <p> por ejemplo) o si es un elemento en lnea
(<img> y<a> por ejemplo).
Si el elemento es de bloque, empieza en una nueva lnea y
ocupa todo el sitio disponible hasta el final de la lnea en la

que se encuentra. Si el elemento es en lnea, ocupa


solamente el espacio necesario para que se vean sus
contenidos.
Position:relative.
relative (relativo) se comporta de la misma manera
que static a menos que le agregues otras propiedades.
Establecer las propiedades top, right, bottom, y left de un
elemento con position: relative; causar que su posicin
normal se reajuste. Otro contenido no se puede ajustar para
adaptarse a cualquier hueco dejado por el elemento. Otra
propiedad es z-index:2, entre mayor el nmero aparece
encima de los dems. Estas propiedades estn presentes en
todos los valores de position menos para static.
El valor relative tambin se corresponde al posicionamiento
normal. No obstante, a diferencia del valor static, el
posicionamiento relative desplaza a las cajas respecto de su
posicin original. Este desplazamiento no afecta al resto de
elementos de la pgina, por lo que se pueden producir
solapamientos y efectos no deseados. Al mover un elemento
con position:relative el espacio normal u original de el queda
vaco y sin ocupar (como si estuviera).
Position:absolute
El valor absolute corresponde al posicionamiento absoluto.
En este caso, la referencia respecto de la que se desplaza un
elemento no es su posicin original, sino los bordes
superior/inferior/derecho/izquierdo del elemento en el que se
encuentra, es decir, de su elemento padre.
El espacio que ocupaba originalmente es ocupado por los
otros elementos, contrario a lo que ocurre con
position:relative.
Position:fixed

Un elemento fixed (fijo) se posiciona a la ventana del


navegador de manera relativa, lo que significa que se
mantendr en el mismo lugar incluso despus de hacer scroll
en la pgina. Al igual que con relative, las
propiedades top, right, bottom, y left tambin son usadas.
Estoy seguro que ya notaste el elemento fijo en la parte de
abajo a la derecha de la pgina. Te doy permiso de que lo
veas ahora. Aqu est el CSS que lo posiciona donde est:
Un elemento con valor fixed no deja espacio en el lugar de la
pgina donde estaba ubicado normalmente.
Los buscadores mviles, sorprendentemente no tienen muy
buen soporte para el valor fixed.

Propiedad float.
La propiedad float posiciona una caja movindola todo lo
posible a la izquierda o derecha de su posicin original. Los
tres valores de esta propiedad se interpretan de la siguiente
manera:
left, la caja se desplaza todo lo posible a la izquierda de la
posicin en la que se encontraba. El resto de elementos de la
pgina se adaptan para mostrarse a su derecha (a menos que
se indique lo contrario mediante la propiedad clear).
right, la caja se desplaza todo lo posible a la derecha de la
posicin en la que se encontraba. El resto de elementos de la
pgina se adaptan para mostrarse a su izquierda (a menos
que se indique lo contrario mediante la propiedad clear).
none, la caja no se desplaza respecto de su posicin original.
Adems de ser el valor por defecto de esta propiedad, el
valor none se puede utilizar para eliminar el float aplicado a
un elemento mediante otros selectores.

La principal caracterstica del posicionamiento float es que el


resto de elementos de la pgina se adaptan
para fluir alrededor de la caja flotante. En el siguiente
ejemplo, se muestra el aspecto por defecto que tendra una
pgina HTML con una imagen y un par de prrafos de texto:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit


amet feugiat justo, vitae feugiat purus. Vivamus aliquam
ligula at ornare dignissim. Ut imperdiet rutrum tincidunt.
Phasellus rhoncus eros auctor porta vulputate.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Duis posuere nibh massa, nec
sollicitudin eros vestibulum non. Aliquam pellentesque
pharetra tortor ut feugiat. Donec vitae gravida nunc, eget
tincidunt magna. Aliquam accumsan et justo quis porttitor.
La forma en la que se muestran los elementos de la pgina es
la esperada debido al tipo de cada elemento: las imgenes
son elementos en lnea y los prrafos son elementos de
bloque. No obstante, esta forma de mostrar los contenidos es
muy diferente a la que se utilizara en un medio impreso como
una revista o un peridico.
Aplicando el posicionamiento flotante a la imagen, los
contenidos de este ejemplo muestran un aspecto mucho ms
lgico:

El estilo CSS aplicado a la imagen es tan sencillo como:


img {

float: left;
margin-right: 1em;
margin-bottom: 1em;
}
Si aadimos una segunda imagen al ejemplo original y
aplicamos los mismos estilos, el resultado es el siguiente:

Este ejemplo muestra el verdadero funcionamiento del


posicionamiento flotante: los elementos se mueven todo lo
posible hacia la izquierda o hacia la derecha. Normalmente
esto significa que se mueven hasta el borde izquierdo/derecho
de su elemento contenedor. Sin embargo, en ocasiones ya
existen otros elementos flotantes en esa posicin, por lo que
se colocan a la izquierda/derecha de esos elementos flotantes.
Si en una determinada posicin existen muchos elementos
flotantes, es posible que el nuevo elemento no quepa. En este
caso, el elemento flotante se colocara lo ms a la
izquierda/derecha posible en la posicin inmediatamente
inferior.
En una misma posicin puede haber elementos flotados a la
izquierda y a la derecha:

Los estilos CSS del ejemplo anterior son los siguientes:


.img1 {

float: left;
margin-right: 1em;
margin-bottom: 1em;
}
.img2 {
float: right;
margin-left: 1em;
margin-bottom: 1em;
}
Si el elemento flotado es muy grande, como la imagen del
siguiente ejemplo, puede afectar a varios elementos de la
pgina:

Aunque en el ejemplo anterior parece que los dos prrafos


adaptan su forma para fluir alrededor de la imagen flotada, en
realidad slo se adaptan los contenidos y no los propios
prrafos.
Si se aplica la propiedad outline sobre los prrafos para ver
claramente sus cajas, se aprecia que la forma del prrafo no
ha cambiado y sigue siendo rectangular. Los contenidos
internos del prrafo s que cambian su forma para adaptarse
al lugar que ocupa el elemento flotado. Esto es importante si
se utilizan bordes o fondos en los prrafos, ya que la imagen
flotada tapar parte de esos fondos y bordes:

Cuando se utiliza la propiedad float suele ser til aplicar


tambin la propiedad clear, que permite controlar el
comportamiento de los elementos cuando a su alrededor
tienen elementos flotantes.
Por ltimo, cuando se utiliza el posicionamiento flotante es
comn encontrarse el problema de que un determinado
elemento tenga en su interior solamente elementos flotados y
el resultado visual no sea el esperado.
Si consideras el siguiente cdigo HTML:
<div>
<a class="anterior" href="#">Anterior</a>
<a class="siguiente" href="#">Siguiente</a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit...</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus
et ...</p>
Y aplicas los siguientes estilos CSS:
a.anterior {
float: left;
}
a.siguiente {

float: right;
}
El resultado esperado sera el siguiente:

Sin embargo, el resultado obtenido es realmente el siguiente:

Los enlaces "anterior" y "siguiente" se salen del <div> en el


que se encuentran. Este comportamiento es habitual cuando
un elemento solamente contiene en su interior elementos
posicionados de forma flotante. Para solucionarlo, aplica la
propiedad overflow con el valor auto sobre ese elemento
contenedor:
div {
overflow: auto;
}
a.anterior {
float: left;
}
a.siguiente {
float: right;
}
Si ahora pruebas de nuevo este ejemplo, el resultado s que
ser el
esperado:

Propiedad display
Definici Establece el tipo de caja generada por un elemento
n
Valores
permitid
os

Uno y slo uno de los siguientes valores:


inline
block
list-item
run-in
inline-block
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
none
inherit

Valor

inline

inicial
Se
aplica a

Todos los elementos

Vlida
en

all

Se
hereda

no

La propiedad display es una de las propiedades CSS ms


infrautilizadas. Aunque todos los diseadores conocen esta
propiedad y utilizan sus valores inline, block y none, las
posibilidades de display son mucho ms avanzadas.
De hecho, la propiedad display es una de las ms complejas
de CSS 2.1, ya que establece el tipo de la caja que genera
cada elemento. La propiedad display es tan compleja que casi
ningn navegador es capaz de mostrar correctamente todos
sus valores.
El valor ms sencillo de display es none que hace que el
elemento no genere ninguna caja. El resultado es que el
elemento desaparece por completo de la pgina y no ocupa
sitio, por lo que los elementos adyacentes ocupan su lugar. Si
se utiliza la propiedad display: none sobre un elemento, todos
sus descendientes tambin desaparecen por completo de la
pgina.
Si se quiere hacer un elemento invisible, es decir, que no se
vea pero que siga ocupando el mismo sitio, se debe utilizar la
propiedad visibility. La propiedad display: none se utiliza
habitualmente en aplicaciones web dinmicas creadas con
JavaScript y que muestran/ocultan contenidos cuando el

usuario realiza alguna accin como pulsar un botn o un


enlace.
Los otros dos valores ms utilizados son block e inline que
hacen que la caja de un elemento sea de bloque o en lnea
respectivamente. El siguiente ejemplo muestra un prrafo y
varios enlaces a los que se les ha aadido un borde para
mostrar el espacio ocupado por cada caja:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum Donec mollis nunc in leo Vivamus fermentum
Como el prrafo es por defecto un elemento de bloque ("block
element"), ocupa todo el espacio disponible hasta el final de
su lnea, aunque sus contenidos no ocupen todo el sitio. Por su
parte, los enlaces por defecto son elementos en lnea ("inline
element"), por lo que su caja slo ocupa el espacio necesario
para mostrar sus contenidos.
Si se aplica la propiedad display: inline al prrafo del ejemplo
anterior, su caja se convierte en un elemento en lnea y por
tanto slo ocupa el espacio necesario para mostrar sus
contenidos:

De la misma forma, si en los enlaces del ejemplo anterior se


emplea la propiedad display: block se transforman en
elementos de bloque, por lo que siempre empiezan en una

nueva lnea y siempre ocupan todo el espacio disponible en la


lnea, aunque sus contenidos no ocupen todo el sitio:

Uno de los valores ms curiosos de display es inline-block, que


crea cajas que son de bloque y en lnea de forma simultnea.
Una caja de tipo inline-block se comporta como si fuera de
bloque, pero respecto a los elementos que la rodean es una
caja en lnea.
El enlace del siguiente ejemplo es de tipo inline-block, lo que
permite por ejemplo establecerle un tamao mediante la
propiedad width:

Si tu navegador soporta el valor inline-block, el ejemplo


anterior se debe visualizar de forma similar a la siguiente
imagen:

Otro de los valores definidos por la propiedad display es listitem, que hace que cualquier elemento de cualquier tipo se
muestre como si fuera un elemento de una lista
(elemento <li>). El siguiente ejemplo muestra tres prrafos
que utilizan la propiedad display: list-item para simular que
son una lista de elementos de tipo <ul>:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Sed non sem quis tellus vulputate lobortis.
Vivamus fermentum, tortor id ornare ultrices, ligula ipsum
tincidunt pede, et blandit sem pede suscipit pede.
A continuacin se muestra el cdigo HTML del ejemplo
anterior:
<p style="display: list-item; margin-left: 2em">Lorem ipsum
dolor sit amet, consectetuer adipiscing elit.</p>
<p style="display: list-item; margin-left: 2em">Sed non sem
quis tellus vulputate lobortis.</p>
<p style="display: list-item; margin-left: 2em">Vivamus
fermentum, tortor id ornare ultrices, ligula ipsum tincidunt
pede, et blandit sem pede suscipit pede.</p>

Los elementos con la propiedad display: list-item son


exactamente iguales que los elementos <li> a efectos de su
visualizacin, por lo que se pueden utilizar las propiedades de
listas como list-style-type, list-style-image, list-styleposition y list-style.
Otro de los valores curiosos de la propiedad display es run-in,
que genera una caja de bloque o una caja en lnea
dependiendo del contexto, es decir, dependiendo de sus
elementos adyacentes. El comportamiento de las cajas de
tipo run-in se rige por las siguientes reglas:
Si la caja run-in contiene una caja de bloque, la caja run-in se
convierte en una caja de bloque.
Si despus de la caja run-in se encuentra una caja de bloque
(que no est posicionada de forma absoluta y tampoco est
posicionada de forma flotante), la caja run-in se convierte en
una caja en lnea en el interior de la caja de bloque.
En cualquier otro caso, la caja run-in se convierte en una caja
de bloque.
El siguiente ejemplo muestra una misma caja de tipo runin que se visualiza de forma muy diferente en funcin del tipo
de caja que existe a continuacin:

El cdigo HTML y CSS del ejemplo anterior se muestra a


continuacin:
<p style="display: run-in; border: 2px dashed
#C00;"><strong>[display: run-in]</strong> Lorem
ipsum</p>

<p style="display: block; border: 2px solid


#000;"><strong>[display: block]</strong> dolor sit amet,
consectetuer adipiscing elit.</p>
<p style="display: run-in; border: 2px dashed
#C00;"><strong>[display: run-in]</strong> Lorem
ipsum</p>
<p style="display: inline; border: 2px solid
#000;"><strong>[display: inline]</strong> dolor sit amet,
consectetuer adipiscing elit.</p>
En la actualidad slo la ltima versin del navegador Opera es
capaz de mostrar correctamente el ejemplo anterior, tal y
como muestra la siguiente imagen:

Figura 4.2 Ejemplo del valor run-in de la propiedad display


El estndar CSS 2.1 incluye un ejemplo del posible uso del
valor run-in. En este ejemplo, un ttulo de seccin <h3> crea
una caja run-in, de forma que cuando va seguido de un
prrafo, el titular se metedentro del prrafo:
<h3 style="display: run-in">Lorem ipsum dolor sit
amet</h3>
<p>Sed non sem quis tellus vulputate lobortis. Vivamus
fermentum, tortor id ornare ultrices, ligula ipsum tincidunt
pede, et blandit sem pede suscipit pede. Nulla cursus porta
sem. Donec mollis nunc in leo. Integer lobortis accumsan
felis.</p>

El resto de valores de la propiedad display estn relacionados


con las tablas y hacen que un elemento se muestre como si
fuera una parte de una tabla: fila, columna, celda o grupos de
filas/columnas. Los valores definidos por la
propiedad display son inline-table, table-row-group, tableheader-group,table-footer-group, table-row, table-columngroup, table-column, table-cell, table-caption.
Aunque los valores relacionados con las tablas son los ms
avanzados, tambin son los que peor soportan los
navegadores. A continuacin se muestra un ejemplo con tres
prrafos de texto que establecen la propiedad display: tablecell:

La propiedad display: table-cell hace que cualquier elemento


se muestre como si fuera una celda de una tabla. Como en el
ejemplo anterior los tres elementos <p> utilizan la
propiedad display: table-cell, el resultado es visualmente
idntico a utilizar una tabla y tres elementos <td>.
Si utilizas un navegador con soporte completo de CSS 2.1, el
ejemplo anterior se visualiza tal y como muestra la siguiente
imagen:

Como los valores relacionados con las tablas hacen que


cualquier elemento que no sea una tabla se muestre y
comporte como si lo fuera, se pueden utilizar para crear
los layouts de las pginas. Hace aos, la estructura de las
pginas se defina mediante tablas, filas y columnas. Esta
solucin tiene innumerables desventajas y por eso todos los
diseadores web profesionales crean la estructura de sus
pginas mediante CSS y elementos <div>.
No obstante, las tablas tienen algunas ventajas en su
comportamiento respecto a los elementos <div>posicionados
de forma absoluta o flotante. La principal ventaja es que todas
las celdas de una fila siempre tienen la misma altura, por lo
que si se utilizan tablas no se sufre el problema de las
columnas de pgina con diferente altura.
Adems, la estructura creada con una tabla nunca se rompe,
ya que las celdas de datos nunca se visualizan una debajo de
otra cuando la ventana del navegador se hace muy pequea.
Sin embargo, cuando se define la estructura mediante
elementos <div> posicionados es posible que la pgina se
rompa y alguna columna se muestre debajo de otros
contenidos.
Utilizando la propiedad display de forma avanzada es posible
crear una estructura de pgina que sea semnticamente
correcta, est diseada exclusivamente con CSS y que se
comporte exactamente igual que como lo hacen las tablas.

El siguiente cdigo HTML corresponde a la estructura de una


pgina con tres columnas:
...
<div id="contenedor">
<div id="contenidos">
<div id="secundario">
Curabitur rutrum...
</div>
<div id="principal">
Lorem ipsum dolor sit amet...
</div>
<div id="lateral">
Nam erat massa...
</div>
</div>
</div>
...
Utilizando las siguientes reglas CSS y la propiedad display es
posible hacer que los elementos <div>anteriores se
comporten como si fueran elementos <tr> y <td>:
#contenedor {
display: table;
border-spacing: 5px;
}
#contenidos {
display: table-row;

}
#principal, #secundario, #lateral {
display: table-cell;
}
#principal {
width: 60%;
}
#secundario, #lateral {
width: 20%;
}
El elemento #contenedor se visualiza como una tabla porque
se le aplica la propiedad display: table. De esta forma, se
pueden aplicar al elemento #contenedor propiedades
exclusivas de las tablas comoborder-spacing. El
elemento #contenidos se visualiza como si fuese una fila de
tabla (etiqueta <tr>). En su interior se encuentran las tres
columnas de la pgina que se visualizan como si fueran tres
elementos <td> gracias a la propiedad display: table-cell.
A continuacin se muestra el resultado obtenido al aplicar
estas reglas CSS al cdigo HTML anterior:

La estructura de la pgina del ejemplo anterior est diseada


exclusivamente con CSS pero se comporta como si fuera una
tabla. Todas las columnas de la pgina tienen la misma altura
sin necesidad de recurrir a ningn truco y la pgina nunca se
rompe por muy pequea que se haga la ventana del
navegador.
Por ltimo, aunque el estndar CSS 2.1 establece que el valor
por defecto de la propiedad display esinline, todos los
navegadores obvian esta recomendacin y asignan por
defecto el valor block a los elementos de bloque y el
valor inline a los elementos en lnea.

Propiedad display: flex

La declaracin display: flex; define un contenedor


flexible y convierte de forma automtica a sus hijos
directos en elementos flexibles. Un contenedor flexible
tiene un Eje principal (main axis), que es la direccin en la
cual se posicionan los elementos flexibles. Y tiene un Eje
transversal, perpendicular al Eje principal. Ambos ejes tienen
una serie de propiedades que controlan cmo se posiciona
cada elemento flexible en relacin a los dems. Puedes
adems poner contenedores flexibles uno dentro de otro, ya
que la pripiedad display no se hereda de forma automtica.
Vamos a ver un grfico que nos lo muestra mejor:

Empezamos con un ejemplo


Vamos a centrarnos en un ejemplo sencillo, perfecto para usar
FlexBox (recordad que necesitis un navegador moderno para
ver bien la demo). Os podis bajar aqu el cdigo del ejemplo.
Como podis ver es un catlogo de viajes donde cada viaje
tiene un ttulo, una foto, una descripcin y un botn de Ms
informacin. Lo que queremos es que cada entrada tenga el
mismo tamao (anchura y altura), que la foto est sobre el
texto (aunque en el HTML no sea as) y que el botn de Ms

informacin est siempre alineado abajo. Adems, cuando


cambiemos el ancho de pantalla se ajustar todo
perfectamente sin necesidad de haber calculado complejos
porcentajes. Con FlexBox conseguir esto es facilsimo!
Veamos en HTML que hemos usado. Nada especial:
XHTML
1 <section id='viajes'>
2

<div class='viajes-item uno'>

<h2>Malta, la isla mediterrnea por conocer</h2>

<p>Dignissim placerat vel aenean porta, magna ac


scelerisque facilisis, rhoncus est! Urna pulvinar dolor lorem
purus dapibus quis vut! Hac nunc vel ridiculus enim magnis
mid phasellus! Duis et pellentesque lacus urna diam? Sed
phasellus, pellentesque mauris ac phasellus lacus augue
enim! Penatibus, porta, sit dis et adipiscing eu, nisi ac.
</p>

5
6
7
8
9

<img src='images/malta.jpg' alt='' />

1
0

<button>MS INFO</button>

1
1

</div>
<div class='viajes-item dos'>

1
2

<h2>Polonia, un pas por descubrir</h2>

1
4

<button>MS INFO</button>

<p>Dignissim placerat vel aenean porta, magna ac


1 scelerisque facilisis.</p>
3
<img src='images/oporto.jpg' alt='' />

1
5
1

</div>
<div class='viajes-item tres'>
<h2>Un paseo por el viejo Oporto</h2>

<p>Cras quis mattis. Elementum, lectus magna, amet


1 dis dis pulvinar scelerisque proin montes quis tempor
7 placerat enim nec dictumst elementum nec augue!
Dignissim non enim. </p>
1
8
<img src='images/polonia.jpg' alt='' />
1
9

<button>MS INFO</button>
</div>

2
</section>
0
Como veis he puesto una clase a cada viaje para numerarlos
en el HTML. Su funcin es simplemente jugar con ellos y ver
qu fcil es cambiarlos de orden con FlexBox. Tambin podis
ver como la imagen est abajo de todo, pero la vamos a situar
arriba. Al botn le he puesto button por simplificar.
Vamos a ver el CSS, pero ahora vamos a ir poco a poco:
Los contenedores flexibles: flex e inline-flex
CSS
1

#viajes {
display: flex;

2
3
4

display: -webkit-flex; /* Para navegadores webkit, como


Safari */
}

Como veris no usamos ni position ni float , ni ningn


valor block o inline para display . Usamos display: flex .
A partir de ese momento el contenedor (#viajes) ser un
contenedor flexible y los elementos dentro del contenedor
sern elementos flexibles que se adaptarn a los espacios
disponibles que les deje el contenedor. Podramos haber
puesto tambin:
CSS

1 #viajes {
2

display: inline-flex;

display: -webkit-inline-flex;

4}
en cuyo caso se comportara en relacin a otros elementos de
la pgina de manera semejante a display: inline. En caso
contrario se comporta igual que display: block.
Orientacin: flex-flow, flex-direction y flex-wrap
Seguimos. Vamos a aadir al contenedor una propiedad que
nos va a permitir decirle al navegador cmo se van a alinear
los elementos que estn dentro del contenedor (#viajes).
CSS
1 #viajes {
2

display: flex;

display: -webkit-flex;

flex-flow: row wrap;

-webkit-flex-flow: row wrap;

6}
Hemos aadido flex-flow: row wrap. De esta manera
establecemos que los elementos dentro del contenedor (los
.viajes-item) se van a alinear en fila (row). flex-flow lo
podramos haber dividido en dos:
CSS
1 #viajes {
2

display: flex;

display: -webkit-flex;

flex-direction: row;

-webkit-flex-direction: row;

flex-wrap: wrap;

-webkit-flex-wrap: wrap;

8}
Hemos visto antes que el eje principal es la direccin
principal, pero hay que tener en cuenta que esta no es
siempre horizontal. La direccin del contenedor se puede
cambiar con la propiedad flex-direction, que especifica cmo
se sitan los elementos flexibles dentro del contenedor. Sus
posibles valores son:
row: se alinean en filas.
row-reverse: en filas, pero con el orden inverso.
column: se alinean en columnas.
column-reverse: en columnas, pero con el orden inverso.
Es decir, que en mviles lo ms lgico para nuestro ejemplo
es tener una lista de una columna en lugar de varias
columnas en horizontal. Esto se consigue en el ejemplo
con flex-direction: column; .
En tamaos grandes se usara flex-direction: row; para lograr
que se distribuya horizontalmente. El valor por defecto
de flex-direction es row, por lo que si no usramos flexdirection los elementos apareceran distribuidos
horizontalmente.
Lo dicho: para probar flex-direction:column vamos a cambiar
la orientacin cuando el navegador tenga un ancho de 500px
o menor. As lo veremos mejor en los mviles:
CSS
1 @media all and (max-width: 500px) {
2

#viajes {

flex-direction: column;

-webkit-flex-direction: column; }

5}
Probad a reducir el ancho del navegador y veris el cambio al
llegar a los 500px de ancho.
La propiedad flex-wrap controla si el contenedor flexible (en
este caso #viajes) tiene una sola lnea o mltiples lneas, as
como la direccin en la que se colocan las nuevas lneas en el
eje transversal. Sus posibles valores son:
nowrap: El contenedor consta de una sola lnea.
wrap: El contenedor tiene mltiples lneas.
wrap-reverse: El contenedor tiene mltiples lneas que se
colocan en orden inverso.
En este caso, al ser mltiples lneas, hemos puesto wrap.
Bueno, ya hemos definido el comportamiento del contenedor
(#viajes). Ahora vamos a ver las propiedades que
podemos asignar a los elementos que estn dentro del
contenedor (los .viajes-item). Para empezar vamos a
establecer que cada .viajes-item sea a su vez un contenedor
flexible, donde sus componentes (el h2, el prrafo, la imagen
y el botn) se van a alinear en columna:
CSS
1 .viajes-item {
2

display: flex;

display: -webkit-flex;

flex-direction: column;

-webkit-flex-direction: column;

6}
Orden: La propiedad order

Podemos establecer el orden en el que aparecen los


componentes de una caja flexible. Por defecto aparecern tal
y como aparecen en el cdigo HTML (equivale a order: 0),
pero eso se puede cambiar de forma sencilla. Volvamos al
ejemplo. Como hemos puesto una clase a cada viaje,
podemos jugar con ellos:
CSS
1
2
3 .uno {
4

background-color: #bacee3;

order: 3;

-webkit-order: 3;

7 }
8 .dos{
9

background-color: #b6ebb3;

1
0

order: 2;
-webkit-order: 2;

1
}
1
.tres {
1
2
background-color: #7ebdbb;
1
3
1
}
4
1
5

order: 1;
-wbkit-order: 1;

Con la propiedad order podemos poner el orden que


queramos. Hemos cambiado el orden del primero y del
tercero. Es muy sencillo, como podis ver (he puesto cada
viaje de un color diferente para poder ver bien cada uno). Os
imaginis qu habrais tenido que hacer para conseguir esto
con las herramientas que tenemos ahora mismo?
A propsito, al poner cada .viaje-item de un color diferente
podis ver cmo todos tiene la misma altura
independientemente de la de sus componentes.
Vamos a aprovechar el media-query que iniciamos antes para
volver a poner todo en su orden original (order: 0para
los .viajes-item) para anchos inferiores a 500px:
CSS
1

@media all and (max-width: 500px) {

#viajes {

flex-direction: column;

4
5
6

-webkit-flex-direction: column; }
}
.viajes-item {

order: 0;

-webkit-order: 0;

9
1
0

width: auto;
}

Dentro de cada viaje queremos poner la imagen encima de


todo. Cmo lo conseguimos?
CSS
1 .viajes-item > img {

order: -1;

-webkit-order: -1;

4}
Como por defecto todos tienen order: 0 si ponemos a la
imagen order: -1 se pondr la primera.
Flexibilidad: La propiedad flex
Con la propiedad flex podemos establecer cmo crece o
decrece un elemento flexible dentro del contenedor en
relacin a los dems. En el ejemplo que estamos siguiendo las
tres columnas tienen el mismo ancho, por ello veris en el
cdigo que todos tienen flex:1:
CSS
1

.uno {

background-color: #bacee3;

flex: 1;

-webkit-flex: 1;

-webkit-order: 3;

.dos{

background-color: #b6ebb3;

flex: 1;

1
0

-webkit-flex:1;

1
1
1
2
1

-webkit-order: 2;
}
.tres {
background-color: #7ebdbb;

3
1
4
1
5

flex: 1;
-webkit-flex:1;

1
6
1
7

-wbkit-order: 1;
}

1
8
Si hubiramos querido que .uno ocupara el doble que los otros
dos habramos hecho:
CSS
1

.uno {

background-color: #bacee3;

flex: 2;

-webkit-flex: 2;

-webkit-order: 3;

Esta propiedad se puede volver ms compleja, porque puede


tener tres parmetros: flex-grow, flex-shrink y flex-basis.
flex-grow: Especifica el factor de crecimiento, es decir, cuanto
crecer el elemento en relacin a los dems cuando hay
espacio disponible del contenedor a ocupar. Por defecto es 0,
que es el valor que dimos en el ejemplo anterior a los tres
elementos.
flex-shrink: Determina el factor de reduccin, es decir, cuanto
decrecer el elemento en relacin a los dems cuando hay

espacio negativo en el contenedor (el contenedor es ms


pequeo de los anchos combinados de los elementos que hay
en su interior). Por defecto es 1.
flex-basis: Toma el mismo valor que la propiedad width y
establece el tamao inicial del elemento antes de distribuir el
espacio libre de acuerdo con los ratios de flex-grow o flexshrink. Cuando se omite, su valor es main-size
(anteriormente, auto).
Para comprender este lo lo mejor es poner un ejemplo.
Supongamos que tenemos un contenedor al que llamaremos
A que tiene 300px de ancho. Hacemos que este contenedor
sea flexible:
CSS
1 A { display: flex;}
Supongamos que este contenedor tiene en su interior dos
elementos, B y C, que no tienen un ancho especificado. Vamos
a establecer los siguientes valores para ambos de la
propiedad flex: flex-grow, flex-shrink, flex-basis:
CSS
1 B { flex: 3 1 100px;}
2 C { flex: 1 2 100px;}
Como hemos establecido un flex-basis para cada elemento de
100px, nos quedarn an 100px libres sin ocupar (300px del
contenedor menos 100px del elemento B y menos 100px del
elemento C). Como se reparte ese espacio disponible entre
los elementos B y C? En funcin del flex-grow: 3 partes para el
elemento B (75px) y una parte para el elemento C (25px). Es
decir, de inicio el elemento B ocupar 100px+75px = 175px
de los 300px disponibles que mide el elemento A, y el
elemento C ocupar 100px+25px=125px de los 300px
disponibles del elemento A.

Ahora bien, supongamos que el elemento contenedor A mide


170px y no 300px. Eso quiere decir que habr espacio
negativo, porque los elementos B y C tienen un flex-basis de
100px cada uno, es decir, 200px, que es 30px mayor que los
170px del contenedor. En este caso el ratio que se usa es el
flex-shrink, que recordemos que era 1 para el elemento B y 2
para el elemento C. Esos 30px se restarn del ancho de los
elementos B y C en funcin de dicho ratio: al elemento B se le
quitarn 10px y al elemento C se le quitarn 20px.
Parece un lo, pero seguro que dentro de poco nos
habituaremos a hacer estos clculos.
Alineacin de los elementos flexibles
Podemos alinear los elementos flexibles en el Eje
principal con justify-content y en el Eje transversal con alignitems y align-self .
Si hay espacio extra dentro de un contenedor flexible la
propiedad justify-content puede definir cmo se usa ese
espacio que sobra. Las opciones son:
flex-start: se distribuyen todos pegados al inicio.
flex-end: se distribuyen todos pegados al final.
center: se distribuyen todos alineados al centro.
space-between: se distribuyen ocupando todo el espacio
disponible, con separaciones iguales entre ellos, pero sin dejar
espacio al inicio y al final.
space-around: se distribuyen ocupando todo el espacio
disponible, con separaciones iguales entre ellos, dejando
espacio al inicio y al final.
Vamos a ver un grfico de W3C que nos lo explica mejor:

Podemos alinear los elementos flexibles en el eje


transversal con align-items y con align-self . La primera
establece el valor por defecto para todos, la segunda sirve
para ser aplicada a elementos individuales sobreescribiendo align-items para ese elemento.
Los valores posibles son:
auto: Slo se puede aplicar en align-self y equivale al valor
de align-items del elemento padre, o a stretch si el elemento
no tiene padre.
flex-start
flex-end
center
baseline
stretch
Como una imagen vale ms que mil palabras, aqu podis ver
cmo se distribuiran los elementos con cada una:

En el ejemplo inicial queramos que el botn de Ms info


estuviera alineado en la parte inferior de cada caja flexible.
Como todas tienen la misma altura, los tres botones estarn
igualmente a la misma altura.
Eso lo conseguimos aplicando a la imagen margin-top: auto
CSS
1 .viajes-item > button {
2

margin-top: auto;

width: 30%;

4}
Adems, queremos que tanto la imagen como el botn estn
centrados dentro de su contenedor. Para ello utilizamos alignself:
CSS
1 .viajes-item > img {

2
3

order: -1;

-webkit-order: -1;

align-self: center;

-webkit-align-self: center;

7 }
8 .viajes-item > button {
9

margin-top: auto;

1
0

width: 30%;
align-self: center;

1
1
1
2

-webkit-align-self: center;
}

Ojo: Hay propiedades de CSS que no funcionarn en un


elemento que se encuentre dentro de un contenedor flexible,
como float, clear, column- o vertical-align.
Bueno, hemos visto con un sencillo ejemplo las posibilidades
de FlexBox. Hay mucho ms que investigar dentro de esta
nueva especificacin.
Diferentes escenarios dependiendo del navegador
Siguiendo lo que nos indica Sean Fioritto en su
artculo Flexbox in the real world, para usar Flexbox hoy:
Si nuestros usuarios slo utilizan los navegadores ms
modernos
Podemos usar FlexBox, slo teniendo cuidado con:
No usar flex-wrap ya que no lo soporta Firefox hasta la
versin 28.

Incluir el prefijo -webkit adems del normal sin prefijo, para


Safari 7.
No usarlo para la estructura global de la pgina, como vimos
al principio del artculo.
Si necesitas Explorer 10 y versiones anteriores de
Firefox, Safari y Opera
Tendrs que combinar versiones anteriores de Flexbox con el
actual, lo que es un poco tedioso (lo puedes solucionar
con Autoprefixer. Tampoco debers usar auto-mrgenes.
Si necesitas IE8 e IE9 (seguro que lamentablemente, si)
En ese caso, y hasta que alguien no desarrolle un polyfill en
condiciones, no hay nada que hacer salvo crear un diseo
aparte para estos navegadores. Quizs con Modernizr
detectar si soporta o no Flexbox y crear un diseo aparte.
Referencias bibliogrficas.
http://www.emenia.es/flexbox-la-caja-flexible-css3/
http://es.learnlayout.com/position.html
http://librosweb.es/libro/css_avanzado/capitulo_4/propi
edad_display.html
https://www.youtube.com/watch?v=R9U0xvJP8Vk

Das könnte Ihnen auch gefallen