Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Escrito por Leandro Burgoa el .
Comentario
Leandro Burgoa -
Lorem ipsum dolor sit amet, consectetur adipiscing 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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
Barra Progreso
Buscador
Buscador Simple
Buscador Grande
Buscador Grande con Fondo
Buscador Con Icono
Contenedores
Contenedor XS (550px)
Contenedor S (650px)
Contenedor M (800px)
Contenedor L (1000px)
Contenedor XL (1200px)
Contenedor Full (100%)
Grid
Grid Simple
1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
12
Grid Sintaxis Alternativa
1-12
1-12
1-12
1-12
1-12
1-12
1-12
1-12
1-12
1-12
1-12
1-12
1-6
1-6
1-6
1-6
1-6
1-6
1-4
1-4
1-4
1-4
1-3
1-3
1-3
1-2
1-2
1-1
Grid Responsivo
xl 3-12 / m 6-12 / xs 12-12
xl 3-12 / m 6-12 / xs 12-12
xl 3-12 / m 6-12 / xs 12-12
xl 3-12 / m 6-12 / xs 12-12
xl 6-12 / xs 12-12
xl 6-12 / xs 12-12
Cajas
Brenda Burgoa @brendaburgoa 25m Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
Heroes
Heroe
Heroe subtítulo
Heroe con botón
Heroe
Heroe subtítulo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.
Heroe Full Height
Heroe
Heroe subtítulo
Secciones
Titulo
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
FlexBox
Flex
The flex container becomes flexible by setting the display property to flex
1
2
3
FlexBox: Direcciones
Flex Dirección Horizontal
The row value stacks the flex items horizontally (from left to right)
1
2
3
Flex Dirección Vertical
The column value stacks the flex items vertically (from top to bottom)
1
2
3
FlexBox: Wrap
Flex Wrap
The wrap value specifies that the flex items will wrap if necessary. Para lograr repartirse en varias líneas añada la propiedad flex-wrap con el valor wrap. Cuando los ítems sean demasiados para desplegarlos en una línea, serán repartidos en la línea siguiente. El ejemplo en vivo de abajo contiene ítems que se les ha asignando un ancho, donde el ancho total de los ítems excede al del contenedor flex. Cuando flex-wrap se coloca como wrap, los ítems se repartirán.
1
2
3
FlexBox: Centrados
La propiedad justify-content es usada para alinear los ítems en el eje principal, cuyo flex-direction define la dirección del flujo. El valor inicial es flex-start que alineará los ítems al inicio del margen del contenedor, pero también se podría definir como flex-end para alinearlos al final, o center para alinearlos al centro.
Flex Centrado
The center value aligns the flex items at the center of the container
1
2
3
Flex Centrado al Inicio
The flex-start value aligns the flex items at the beginning of the container (this is default):
1
2
3
Flex Centrado al Final
The flex-end value aligns the flex items at the end of the container
1
2
3
Flex Espaciado Interior
The space-around value displays the flex items with space before, between, and after the lines
1
2
3
Flex Espaciado Exterior
The space-between value displays the flex items with space between the lines
1
2
3
FlexBox: Alineados
El valor inicial para esta propiedad es stretch razón por la cual los ítems se ajustan por defecto a la altura de aquel más alto. En efecto se ajustan para llenar el contenedor flex — el ítem más alto define la altura de este.
Flex Alineado Centrado Vertical
In these examples we use a 200 pixels high container, to better demonstrate the align-items property.
1
2
3
Flex Alineado Inicio Vertical
The flex-start value aligns the flex items at the top of the container:
1
2
3
Flex Alineado Final Vertical
The flex-end value aligns the flex items at the bottom of the container:
1
2
3
Flex Alineado Ensanchado
The stretch value stretches the flex items to fill the container (this is default):
1
2
3
Flex Alineado Baseline Tipografica
The baseline value aligns the flex items such as their baselines aligns
1
2
3
FlexBox: Alineados Contenido
Flex Contenido con Espaciado Interior
The space-between value displays the flex lines with equal space between them.
1
2
3
4
5
6
7
8
9
10
11
12
Flex Contenido con Espaciado Exterior
The space-around value displays the flex lines with space before, between, and after them.
1
2
3
4
5
6
7
8
9
10
11
12
Flex Contenido Centrado
The center value displays display the flex lines in the middle of the container.
1
2
3
4
5
6
7
8
9
10
11
12
Centrado Perfecto
Con un flex centrado y una alineado vertical
1
Items de los flex
Orden
The order property specifies the order of the flex items.
1
2
3
4
Crecimiento del Flex
The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items. Con la propiedad flex-grow definida como un entero positivo, los ítems flex pueden crecer en el eje principal a partir de flex-basis. Esto hará que el ítem se ajuste y tome todo el espacio disponible del eje, o una proporción del espacio disponible si otro ítem también puede crecer.
1
2
3
Contracción del Flex
The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items. Así como la propiedad flex-grow se encarga de añadir espacio sobre el eje principal, la propiedad flex-shrink controla como se contrae. Si no contamos con suficiente espacio en el contenedor para colocar los ítems y flex-shrink posee un valor entero positivo, el ítem puede contraerse a partir de flex-basis. Así como podemos asignar diferentes valores de flex-grow con el fin que un ítem se expanda más rápido que otros — un ítem con un valor más alto de flex-shrink se contraerá más rápido que sus hermanos que poseen valores menores.
1
2
3
4
5
6
7
8
9
10
Bases Iniciales del Flex
The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.Con flex-basis se define el tamaño de un ítem en términos del espacio que deja como espacio disponible. El valor inicial de esta propiedad es auto — en este caso el navegador revisa si los ítems definen un tamaño. En el ejemplo de arriba, todos los ítems tienen un ancho de 100 pixeles así que este es usado como flex-basis.
1
2
3
4
Autocentrado
The align-self property specifies the alignment for the selected item inside the flexible container. The align-self property overrides the default alignment set by the container's align-items property.
1
2
3
4
Barra de navegación
Cajas
Modelo 1
Leandro Burgoa
Programador de Computadoras
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
37 Amigos
Registrado en 2016
Modelo 2
Leandro Burgoa
14h
3 comentarios
17 Likes
Modelo 3
Titulo de la noticia
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
