flexbox float float:left float float float float Dificultad - PowerPoint PPT Presentation

flexbox

float float:left

float

float

float

float • Dificultad para organizar • El posicionamiento visual depende del markup • No puedes centrar • No controlas las alturas en sistemas de columnas

table display:table display:table-cell display:table-row display:table-caption …

display:table-cell

display:table-cell

flexbox

flexbox display:flex

flexbox display:-ms-flexbox; display:flex

flexbox display:-moz-flex; display:-ms-flexbox; display:flex

flexbox display:-webkit-flex; display:-moz-flex; display:-ms-flexbox; display:flex

flexbox display:-webkit-box; display:-webkit-flex; display:-moz-flex; display:-ms-flexbox; display:flex

caniuse.com

flexbox display:-webkit-box; display:-webkit-flex; display:-moz-flex; display:-ms-flexbox; display:flex @include flexbox;

flexbox Provee una forma más eficiente de maquetar cubriendo espacios disponibles expandiendo elementos o encogiéndolos.

.container { display: flex; }

eje horizontal

.container { display: flex; justify-content: flex-start; } .item { }

justify-content: flex-start

.container { display: flex; justify-content: flex-end; } .item { }

justify-content: flex-end

.container { display: flex; justify-content: center; } .item { }

justify-content: center

.container { display: flex; justify-content: space-between; } .item { }

justify-content: space-between

.container { display: flex; justify-content: space-around; } .item { }

justify-content: space-around

justify-content justify-content: flex-start justify-content: flex-end justify-content: center justify-content: space-between justify-content: space-around

.container { display: flex; justify-content: space-around; flex-wrap: wrap; } .item { width: 200px; }

flex-wrap

flex-wrap

eje vertical

.container { display: flex; justify-content: flex-end; align-items: flex-start; // default } .item { }

align-items: flex-start El Mariachi Wakkos El Padrino José Dimas es fundador de I create scalable and robust Ockham Ti, empresa de CSS, focusing in maintainability. desarrollo de software, app I Apply DRY rules and some móviles, videojuegos y cursos. I work with various technology OOCSS (Not every time, CSS is Profesor de universidad. Ha companies as a consultant, still cascade) and I always trabajado en varias trainer and developer. In comment my CSS with BEM universidades de El Caribe, computer engineering comments. México y de EscuelaIT. emphasizes my passion for mobile applications across I usually attach myself to these platforms, but with special rules and guidelines when emphasis on training, where coding CSS. implement my own method: LEX, by which several startups I use CSS frameworks, (not have been able to begin to take design frameworks like their first steps into the Bootstrap/Foundation or applications sector. Over 25 similar). I believe a framework years of commitment to the should do your work easier, it is industry. not meant to do ALL the work: Every project evolves in a different way and depending on its path.

.container { display: flex; justify-content: flex-end; align-items: flex-end; } .item { }

align-items: flex-end Wakkos I create scalable and robust El Padrino CSS, focusing in maintainability. I Apply DRY rules and some OOCSS (Not every time, CSS is still cascade) and I always comment my CSS with BEM comments. I work with various technology companies as a consultant, I usually attach myself to these trainer and developer. In rules and guidelines when computer engineering coding CSS. emphasizes my passion for El Mariachi mobile applications across I use CSS frameworks, (not platforms, but with special design frameworks like emphasis on training, where José Dimas es fundador de Bootstrap/Foundation or implement my own method: Ockham Ti, empresa de similar). I believe a framework LEX, by which several startups desarrollo de software, app should do your work easier, it is have been able to begin to take móviles, videojuegos y cursos. not meant to do ALL the work: their first steps into the Profesor de universidad. Ha Every project evolves in a applications sector. Over 25 trabajado en varias different way and depending on years of commitment to the universidades de El Caribe, its path. industry. México y de EscuelaIT.

.container { display: flex; justify-content: flex-end; align-items: center; } .item { }

align-items: center Wakkos El Padrino I create scalable and robust CSS, focusing in maintainability. I Apply DRY rules and some OOCSS (Not every time, CSS is El Mariachi still cascade) and I always I work with various technology comment my CSS with BEM companies as a consultant, comments. José Dimas es fundador de trainer and developer. In Ockham Ti, empresa de computer engineering I usually attach myself to these desarrollo de software, app emphasizes my passion for rules and guidelines when móviles, videojuegos y cursos. mobile applications across coding CSS. Profesor de universidad. Ha platforms, but with special trabajado en varias emphasis on training, where I use CSS frameworks, (not universidades de El Caribe, implement my own method: design frameworks like México y de EscuelaIT. LEX, by which several startups Bootstrap/Foundation or have been able to begin to take similar). I believe a framework their first steps into the should do your work easier, it is applications sector. Over 25 not meant to do ALL the work: years of commitment to the Every project evolves in a industry. different way and depending on its path.

.container { display: flex; justify-content: flex-end; align-items: stretch; } .item { }

align-items: stretch El Mariachi Wakkos El Padrino José Dimas es fundador de I create scalable and robust Ockham Ti, empresa de CSS, focusing in maintainability. desarrollo de software, app I Apply DRY rules and some móviles, videojuegos y cursos. I work with various technology OOCSS (Not every time, CSS is Profesor de universidad. Ha companies as a consultant, still cascade) and I always trabajado en varias trainer and developer. In comment my CSS with BEM universidades de El Caribe, computer engineering comments. México y de EscuelaIT. emphasizes my passion for mobile applications across I usually attach myself to these platforms, but with special rules and guidelines when emphasis on training, where coding CSS. implement my own method: LEX, by which several startups I use CSS frameworks, (not have been able to begin to take design frameworks like their first steps into the Bootstrap/Foundation or applications sector. Over 25 similar). I believe a framework years of commitment to the should do your work easier, it is industry. not meant to do ALL the work: Every project evolves in a different way and depending on its path.

propiedades de hijos .item { width: 200px; }

.container { display: flex; } .item { width: 200px; order: 0; flex-grow: 0; flex-shrink: 0; align-self: auto; flex-basis: auto; }

.container { display: flex; } .mariachi { width: 200px; order: 1; flex-grow: 0; flex-shrink: 0; align-self: auto; flex-basis: auto; }

flex children markup order: 2 markup order: 3 markup order: 1 Wakkos El Padrino El Mariachi José Dimas es fundador de I create scalable and robust Ockham Ti, empresa de CSS, focusing in maintainability. desarrollo de software, app I Apply DRY rules and some móviles, videojuegos y cursos. I work with various technology OOCSS (Not every time, CSS is Profesor de universidad. Ha companies as a consultant, still cascade) and I always trabajado en varias trainer and developer. In comment my CSS with BEM universidades de El Caribe, computer engineering comments. México y de EscuelaIT. emphasizes my passion for mobile applications across I usually attach myself to these platforms, but with special order: 1; rules and guidelines when emphasis on training, where coding CSS. implement my own method: LEX, by which several startups I use CSS frameworks, (not have been able to begin to take design frameworks like their first steps into the Bootstrap/Foundation or applications sector. Over 25 similar). I believe a framework years of commitment to the should do your work easier, it is industry. not meant to do ALL the work: Every project evolves in a different way and depending on its path.