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>

https://jsbin.com/hetavaj/3/edit?html,output

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.

http://jsbin.com/hetavaj/7/edit?html,css,output

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-block

http://jsbin.com/hetavaj/10/edit?html,css,output

Problemas 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