CSS Flexible Box Layout o Flexbox (v. 2016) www.xpert.video
Marlon Ceballos - @adobexpert Adobe Community Professional / Adobe CertiďŹ ed Instructor
pert pert
Learn design & code Learn design & code
www.xpert.video
CERTIFIED INSTRUCTOR Web C E R Design T I F I E DMaster I N S T R/ U C T OMaster R
Design Master / Web Master
CERTIFIED INSTRUCTOR
Design Master / Web Master
www.linkedin.com/in/marlonceballos/
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Learn
Learn
pert
design & code
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Conceptos fundamentales
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Layout tradicional • Block / inline • Los elementos de tipo "Block" siguen el "document flow" • Usamos propiedades como display, position, float y clear.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Layout tradicional • Compleja • Poco intuitivo • Elementos colapsados.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Flexbox • Simple/poderoso/intuitivo • No colapsa elementos • Se basa en la distribución de espacios y alineación de elementos.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Soporte
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Estado actual • W3C Candidate Recommendation, 26 May 2016 • www.w3.org/Style/CSS/current-work.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Recursos • www.w3.org/TR/css-flexbox/ • www.w3schools.com/css/css3_flexbox.asp • www.css-tricks.com/snippets/css/a-guide-to-flexbox/.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Flexbox
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
TerminologĂa
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Flex containers • display: flex | inline-flex (nuevos valores) • Convierten al contenedor en "Flex Container" • Algunas propiedades CSS no aplican a los "Flex Container" (float, clear, vertical-align, etc).
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Flex items • Cada child de un "Flex container" se convierte en un "Flex item" • Los "Flex item" siguen la dirección del "Flex container".
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
flex-direction • flex-direction: row | row-reverse | column | column-reverse • Define la dirección del "Main axis" • Se aplica a los "Flex containers".
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
flex-wrap • flex-wrap: nowrap | wrap | wrap-reverse • Se aplica a los "Flex containers" • Define si el "Flex container" en single-line o multi-line.
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
flex-flow • flex-flow: <flex-direction> || <flex-wrap> • Shorthand notation • Valor inicial: row nowrap • Se aplica a los "Flex containers".
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
order • order: <integer> • Valor inicial: 0 • Controla el orden en el cual aparecen los "Flex items" • Se aplica a los "Flex items".
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
flex-grow • flex-grow: <integer> • Valor inicial: 0 • Define un factor de ampliación • Se aplica a los "Flex items".
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
flex-shrink • flex-shrink: <integer> • Valor inicial: 1 • Define un factor de reducción • Se aplica a los "Flex items".
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
flex-basis • flex-basis: content | <width> • Valor inicial: auto • Define el tamaño inicial • Se aplica a los "Flex items".
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
flex • flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] • Shorthand notation (uso recomendado) • Valor inicial: 1 0 auto • Se aplica a los "Flex items".
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
justify-content • justify-content: flex-start | flex-end | center | space-between | space-around • Se aplica a los "Flex containers"
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
align-items • align-items: flex-start | flex-end | center | baseline | stretch • Se aplica a los "Flex containers"
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
align-self • align-self: auto | flex-start | flex-end | center | baseline | stretch • Se aplica a los "Flex items"
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
align-content • align-content: flex-start | flex-end | center | space-between | spacearound | stretch • Se aplica a los multi-line"Flex containers".
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Learn
pert
design & code
Gracias!
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Esta presentaciรณn (y otras)
www.xper.co/presenta
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master
Recursos
www.delicious.com/marliton
Learn
pert
design & code
www.xpert.video
CERTIFIED INSTRUCTOR
Design Master / Web Master