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
Raku Raku Notion 20260128
Avatar for hareyaka hareyakayuruyaka
0
340
生成AIを使ったコードレビューで定性的に品質カバー
Avatar for Chiaki Okamoto chiilog
1
270
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
Avatar for Yoichiro Kubo heimusu
7
2.8k
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
Avatar for tetutetu214 tetutetu214
2
120
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
230
「ブロックテーマでは再現できない」は本当か？
Avatar for Takashi Kitajima inc2734
0
1k
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
690
そのAIレビュー、レビューしてますか？ / Are you reviewing those AI reviews?
Avatar for r-kagaya rkaga
6
4.6k
CSC307 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
840
登壇資料を作る時に意識していること #登壇資料_findy
Avatar for konifar konifar
4
1.5k
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
650

Featured

See All Featured
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
150
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
0
100
Claude Code のすすめ
Avatar for schroneko schroneko
67
210k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.2k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
140
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7k

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]