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
96
An Animated Poem, built with CSS drawings & animations
Avatar for Felipe Bernardes felipebernardes
1
200
Todas as falhas da minha carreira (até outubro/2019)
Avatar for Felipe Bernardes felipebernardes
0
83
Immersive Journalism using AR/VR
Avatar for Felipe Bernardes felipebernardes
0
210
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
190
CSS Layouting::putting things into place
Avatar for Felipe Bernardes felipebernardes
0
64

Other Decks in Programming

See All in Programming
Feature Flags Suck! - KubeCon Atlanta 2025
Avatar for Pete Hodgson phodgson
0
150
Rails Girls Sapporo 2ndの裏側―準備の日々から見えた、私が得たもの / SAPPORO ENGINEER BASE #11
Avatar for はる lemonade_37
2
180
チーム開発の “地ならし"
Avatar for konifar konifar
8
5.4k
Chart.jsで長い項目を表示するときのハマりどころ
Avatar for yumechi(Motoki Hirao) yumechi
0
130
カンファレンス遠征を（安く）楽しむ技術
Avatar for 藤掛大介 wp_daisuke
0
180
レイトレZ世代に捧ぐ、今からレイトレを始めるための小径
Avatar for ichi-raven ichi_raven
0
440
Private APIの呼び出し方
Avatar for Kishikawa Katsumi kishikawakatsumi
3
890
開発生産性が組織文化になるまでの軌跡
Avatar for ふくすけ tonegawa07
0
180
最新のDirectX12で使えるレイトレ周りの機能追加について
Avatar for Pocol projectasura
0
270
ノーコードからの脱出 -地獄のデスロード- / Escape from Base44
Avatar for Keisuke69 keisuke69
1
740
AIと協働し、イベントソーシングとアクターモデルで作る後悔しないアーキテクチャ Regret-Free Architecture with AI, Event Sourcing, and Actors
Avatar for Tomohisa Takaoka tomohisa
2
4.4k
CloudflareのSandbox SDKを試してみた
Avatar for syumai syumai
0
170

Featured

See All Featured
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
2.9k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
330
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k

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]