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

flexbox 4 life (In.Tegra.Do)

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Felipe Bernardes Felipe Bernardes
November 19, 2015
Programming
98
0

flexbox 4 life (In.Tegra.Do)

Talk apresentada na Tegra em 04/09/2015

Avatar for Felipe Bernardes

Felipe Bernardes

November 19, 2015

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
100
An Animated Poem, built with CSS drawings & animations
Avatar for Felipe Bernardes felipebernardes
1
220
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
240
7 Formas de Melhorar seu Networking
Avatar for Felipe Bernardes felipebernardes
0
50
BEM Show & Tell @ Space Coworking
Avatar for Felipe Bernardes felipebernardes
0
49
Get Started With PWAs
Avatar for Felipe Bernardes felipebernardes
0
200
CSS Layouting::putting things into place
Avatar for Felipe Bernardes felipebernardes
0
65

Other Decks in Programming

See All in Programming
アーキテクチャモダナイゼーションとは何か
Avatar for nwiizo nwiizo
17
4.2k
AIと共にエンジニアとPMの “二刀流”を実現する
Avatar for Naruo Yoshiki naruogram
0
130
ローカルで稼働する AI エージェントを超えて / beyond-local-ai-agents
Avatar for geeawa gawa
1
250
一度始めたらやめられない開発効率向上術 / Findy あなたのdotfilesを教えて！
Avatar for Takashi Kokubun k0kubun
4
2.8k
Codex CLIのSubagentsによる並列API実装 / Parallel API Implementation with Codex CLI Subagents
Avatar for 冨澤宝斗 takatty
2
850
RSAが破られる前に知っておきたい 耐量子計算機暗号(PQC)入門 / Intro to PQC: Preparing for the Post-RSA Era
Avatar for mackey0225 mackey0225
3
120
Xdebug と IDE による デバッグ実行の仕組みを見る / Exploring-How-Debugging-Works-with-Xdebug-and-an-IDE
Avatar for shin1x1 shin1x1
0
340
それはエンジニアリングの糧である：AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
Avatar for nrs nrslib
1
830
AI時代の脳疲弊と向き合う ~言語学としてのPHP~
Avatar for Sakurai sakuraikotone
1
1.8k
メッセージングを利用して時間的結合を分離しよう #phperkaigi
Avatar for Takuma Kajikawa kajitack
3
560
感情を設計する
Avatar for nakamichi ichimichi
5
1.2k
Feature Toggle は捨てやすく使おう
Avatar for gennei gennei
0
430

Featured

See All Featured
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
170
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
310
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
310
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
500
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
11k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.5k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k

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]