- PDF Free Download

Transcription

1

2 flexbox

3 float float:left

4 float

5 float

6 float

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

8 table display:table display:table-cell display:table-row display:table-caption

9 display:table-cell

10 display:table-cell

11 flexbox

12 flexbox display:flex

13 flexbox display:-ms-flexbox; display:flex

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

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

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

17 caniuse.com

18

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

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

21 .container { display: flex;

22 eje horizontal

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

24 justify-content: flex-start

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

26 justify-content: flex-end

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

28 justify-content: center

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

30 justify-content: space-between

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

32 justify-content: space-around

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

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

35 flex-wrap

36 flex-wrap

37 eje vertical

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

56 .form { display: flex; input[type=text] { width: 100%; input[type=submit] { flex-basis: 100px;

57 <form action="" class="form"> <input type="text" /> <input type="submit" /> </form>

58 submit

59 submit

60

61