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
96

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
94
An Animated Poem, built with CSS drawings & animations
Avatar for Felipe Bernardes felipebernardes
1
190
Todas as falhas da minha carreira (até outubro/2019)
Avatar for Felipe Bernardes felipebernardes
0
81
Immersive Journalism using AR/VR
Avatar for Felipe Bernardes felipebernardes
0
200
7 Formas de Melhorar seu Networking
Avatar for Felipe Bernardes felipebernardes
0
48
BEM Show & Tell @ Space Coworking
Avatar for Felipe Bernardes felipebernardes
0
48
Get Started With PWAs
Avatar for Felipe Bernardes felipebernardes
0
180
CSS Layouting::putting things into place
Avatar for Felipe Bernardes felipebernardes
0
60

Other Decks in Programming

See All in Programming
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
Avatar for ShuyaKinjo shuyakinjo
1
250
The State of Fluid (2025)
Avatar for Simon Praetorius s2b
0
110
変化を楽しむエンジニアリング ~ いままでとこれから ~
Avatar for murajun1978 murajun1978
0
710
画像コンペでのベースラインモデルの育て方
Avatar for tattaka tattaka
3
1.5k
Vibe coding コードレビュー
Avatar for kinopee kinopeee
0
430
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜（奥田りさ）The Basics of Agent Development with ADK — A Demo-Focused Introduction
Avatar for RisaTube risatube
PRO
6
1.4k
Constant integer division faster than compiler-generated code
Avatar for herumi herumi
2
570
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
Avatar for shin1x1 shin1x1
1
950
DynamoDBは怖くない！〜テーブル設計の勘所とテスト戦略〜
Avatar for hiroto_0411 hyamazaki
0
200
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
Avatar for Kazuki Fujikawa kfujikawa
0
760
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
Avatar for ktr ktr_0731
0
240
decksh - a little language for decks
Avatar for Anthony Starks ajstarks
4
21k

Featured

See All Featured
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
65k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
800
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.5k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k
Done Done
Avatar for chrislema chrislema
185
16k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k

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]