Beruflich Dokumente
Kultur Dokumente
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
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.
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:
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:
float: right;
}
El resultado esperado sera el siguiente:
Propiedad display
Definici Establece el tipo de caja generada por un elemento
n
Valores
permitid
os
Valor
inline
inicial
Se
aplica a
Vlida
en
all
Se
hereda
no
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>
}
#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:
5
6
7
8
9
1
0
<button>MS INFO</button>
1
1
</div>
<div class='viajes-item dos'>
1
2
1
4
<button>MS INFO</button>
1
5
1
</div>
<div class='viajes-item tres'>
<h2>Un paseo por el viejo Oporto</h2>
<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
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;
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
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;
#viajes {
flex-direction: column;
4
5
6
-webkit-flex-direction: column; }
}
.viajes-item {
order: 0;
-webkit-order: 0;
9
1
0
width: auto;
}
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;
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;
}