Flexbox
Agenda
- Estructura de una pagina
- Que es un layout
- los 4 tipos de layout antes de flexbox
-
block
-
inline
-
table
-
positioned
-
- display: el origen de toda discordia
- Problemas del box model
- ejemplo de menu con layout clasicos
- definicion de flexbox
- parent y children
- ejemplos
- react native
Estructura de una pagina
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Este es un h1</h1>
<h3>Este es un h3</h3>
<hr>
<ul>
<li>estos</li>
<li>son</li>
<li>los</li>
<li>items</li>
<li>de</li>
<li>una</li>
<li>lista</li>
</ul>
<hr>
<div>
<span>este espan esta dentro de un div</span>
<p>este p esta dentro de un div</p>
</div>
<hr>
</body>
</html>Page layout is the part of graphic design that deals in the arrangement of visual elements on a page.
4 tipos de layout
-
block layout: Diseñado para organizar docuemntos. Y esa organizacion es en vertical. Por ejemplo: h1, h3, div, p.
-
inline layout: Diseñado para organizar texto horizontalemente. Van dentro de elementos de tipo block. Por ejemplo span, em
-
table layout: Diseñado para organizar y mostrar datos en 2 dimensiones;
-
positioned layout: Diseñado para posicionamiento explicito mas alla del resto de los elementos.
Display: el origen de toda la discordia
Entonces nos dimos cuenta de que cambiando la propiedad display, podiamos cambiar el comportamiento de los tipos de elemntos, y de esta forma, hacer de un block, un inline.
display: inline-blockProblemas del box model
Porcentaje
+
PADDING
+
BORDER
WTF?!?!?!
ejemplo de menu con layout clasicos
DEFinicion de flexbox
My goal in doing Flexbox and later Grid was to replace all the crazy float/table/inline-block/etc hacks that I’d had to master as a webdev.
All that crap was (a) stupid, (b) hard to remember, and (c) limited in a million annoying ways, so I wanted to make a few well-done layout modules that solved the same problems in simple, easy-to-use, and complete ways.
Tab Atkins Jr., author of the Flexbox and Grid specs
Flexbox, de CSS3 es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos.
Muchos diseñadores verán que el modelo "caja flexible" es más sencillo de utilizar. Los elementos "hijos" de una "caja flexible" pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adapterse al espacio visible.
...el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente.
parent y children
Propiedades
- tipo de display
- direccion
- wrapeo en una linea
- distribucion del contenido
- alineacion de los children
- alienacion del parent
- orden
- expansion
- contraccion
- alienacion propia de un children
Parent
Children
ejemplo
REAct native
gracias
Flexbox
By Pablo Hiyano
Flexbox
Plan B
