Upgrade to Pro — share decks privately, control downloads, hide ads and more …

flexbox 4 life (In.Tegra.Do)

Avatar for Felipe Bernardes Felipe Bernardes
November 19, 2015
Programming
0
98

flexbox 4 life (In.Tegra.Do)

Talk apresentada na Tegra em 04/09/2015

Avatar for Felipe Bernardes

Felipe Bernardes

November 19, 2015
Tweet

More Decks by Felipe Bernardes

See All by Felipe Bernardes
Gardening for Communities - Organically Cultivating Local Communities
Avatar for Felipe Bernardes felipebernardes
0
120
15 JavaScript Do's & Don'ts
Avatar for Felipe Bernardes felipebernardes
0
99
An Animated Poem, built with CSS drawings & animations
Avatar for Felipe Bernardes felipebernardes
1
210
Todas as falhas da minha carreira (até outubro/2019)
Avatar for Felipe Bernardes felipebernardes
0
84
Immersive Journalism using AR/VR
Avatar for Felipe Bernardes felipebernardes
0
230
7 Formas de Melhorar seu Networking
Avatar for Felipe Bernardes felipebernardes
0
50
BEM Show & Tell @ Space Coworking
Avatar for Felipe Bernardes felipebernardes
0
48
Get Started With PWAs
Avatar for Felipe Bernardes felipebernardes
0
200
CSS Layouting::putting things into place
Avatar for Felipe Bernardes felipebernardes
0
64

Other Decks in Programming

See All in Programming
AgentCoreとHuman in the Loop
Avatar for Har1101 har1101
5
240
CSC307 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
840
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
Avatar for とすり tosuri13
5
770
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
180
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
290
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
Avatar for Haochen Kotoi-Xie haochenx
0
140
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
780
24時間止められないシステムを守る-医療ITにおけるランサムウェア対策の実際
Avatar for kouki.miura koukimiura
1
110
CSC307 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
490
CSC307 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
660
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
380
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
1.4k

Featured

See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.2k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
170
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
120
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
1.9k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
140
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
32k

Transcript

  1. flexbox4life INTEGRADO P O R F E L I P

    E B E R N A R D E S

  2. grid layout

  3. None
  4. None
  5. None

  6. implementação

  7. table grid

  8. float grid

  9. flexbox module a melhor forma de posicionar, alinhar e distribuir

    elementos

  10. <section class=”flex-container”> <div class=”pera”></div> <div class=”uva”></div> <div class=”maca”></div> </section>

  11. None

  12. .flex-container { display: flex; }

  13. None

  14. .flex-container { display: flex; flex-flow: row; }

  15. None

  16. .flex-container { display: flex; flex-flow: row-reverse; }

  17. None

  18. .flex-container { display: flex; flex-flow: column; }

  19. None

  20. .flex-container { display: flex; flex-flow: column-reverse; }

  21. None

  22. .flex-container { display: flex; flex-flow: row wrap; }

  23. None

  24. .pera, .uva, .maca { width: 40%; }

  25. None

  26. .flex-container { display: flex; flex-flow: row; height: 100vh; }

  27. None

  28. .pera, .uva, .maca { margin: auto; }

  29. None

  30. margin: auto;

  31. None

  32. tem mais

  33. .pera { order: 2; } .uva { order: 1; }

    .maca { order: 3; }
  34. None

  35. .pera, .maca { flex-grow: 1; } .uva { flex-grow: 2;

    }
  36. None

  37. .flex-container { height: 100vh; display: flex; align-content: center; } ou…

    flex-start, flex-end, stretch
  38. None

  39. tem mais align-self, flex-basis, flex-shrink, justify-content...

  40. can I...

  41. None

  42. flexbugs

  43. None
  44. None

  45. #milMaravilha … certo?

  46. None

  47. .flex-container { display: -webkit-box; display: -moz-box; -moz-display: flex; -ms-display: flexbox;

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

  48. .uva { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; order: 2; -webkit-order: 2;

    -moz-order: 2; -ms-order: 2; }

  49. keep calm

  50. _flexmixins.scss PRIMEIRA CONTRIB PRA @TEGRAOSS

  51. @mixin display-flex { display: -webkit-box; display: -moz-box; -moz-display: flex; -ms-display:

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

  52. .flex-container { @include display-flex; }

  53. .flex-container { @include display-flex; @include flex-flow(row wrap); }

  54. .flex-container { @include display-flex; @include flex-flow(row wrap); @include align-content(space-around); }

  55. .uva { @include order(2); }

  56. None
  57. None
  58. None

  59. resumão - markup limpa - melhor SEO - responsividade -

    CSS semântico

  60. cheatsheet css-tricks.com/snippets/css/a-guide-to-flexbox/

  61. valeu! http://felipebernardes.github.io [email protected]