Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Layouts flexiveis com Flex-box
Search
Roger Albino
June 26, 2015
Programming
0
250
Layouts flexiveis com Flex-box
Campinas Front-End Meetup
Roger Albino
June 26, 2015
Tweet
Share
More Decks by Roger Albino
See All by Roger Albino
Utilizando Clean Code para deixar seu código ainda mais manutenível - TDC Transformation - Grupo Boticário
rogeralbinoi
0
430
Código Limpo (Clean Code) - FATEC DevDay 2021
rogeralbinoi
1
220
Desmistificando a Refatoração - TDC Innovation 2021
rogeralbinoi
1
210
Código Limpo - DevDay Fatec Mogi Mirim 2019
rogeralbinoi
1
160
Princípios S.O.L.I.D - DevDay Fatec Mogi Mirim 2019
rogeralbinoi
1
340
Construindo Progressive Web Apps - GDG Mogi Guaçu 2019
rogeralbinoi
1
170
Criando Componentes com ReactJS
rogeralbinoi
0
480
Other Decks in Programming
See All in Programming
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
530
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
260
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
140
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
270
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
250
GraphRAGの仕組みまるわかり
tosuri13
8
510
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
140
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
480
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.8k
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
1.1k
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.8k
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
Raft: Consensus for Rubyists
vanstee
140
7k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Code Review Best Practice
trishagee
69
18k
Gamification - CAS2011
davidbonilla
81
5.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
Embracing the Ebb and Flow
colly
86
4.7k
Transcript
Layouts flexíveis Layouts flexíveis com Flex-box com Flex-box
Roger Albino Roger Albino Sou desenvolvedor front-end na Vorax, em
Mogi Mirim. Front-ender, músico, e jogador de Pump it Up
None
Container Container
.container { display: flex; /* or inline-flex */ } Container
.container { flex-direction: row | row-reverse | column | column-reverse;
} Direction
.container{ flex-wrap: nowrap | wrap | wrap-reverse; } Wrap
flex-flow: <‘flex-direction’> || <‘flex-wrap’> Shorthand para flex-direction e flex-wrap
.container { justify-content: flex-start | flex-end | center | space-between
| space-around; } Justify Content
.container { align-items: flex-start | flex-end | center | baseline
| stretch; } Align-items
.container { align-content: flex-start | flex-end | center | space-between
| space-around | stretch; } align-content
Flex-item Flex-item
.item { order: <integer>; } order
.item { flex-grow: <number>; /* default 0 */ } Flex-grow
.item { flex-shrink: <number>; /* default 1 */ } Flex-shrink
.item { flex-basis: <length> | auto; /* default auto */
} Flex-basis
flex: none; /* 1 valor: flex-grow */ flex: 2; /*
1 valor: flex-basis */ flex: 30px; /* 2 valores: flex-grow | flex-basis */ flex: 1 30px; /* 2 valores: flex-grow | flex-shrink */ flex: 2 2; /* 3 valores: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; Flex
.item { align-self: auto | flex-start | flex-end | center
| baseline | stretch; } Align-self
Posso usar? Posso usar?
http://caniuse.com/#feat=flexbox
@mixin flexbox() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display:
-webkit-flex; display: flex; } @mixin flex($values) { -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; } @mixin order($val) { -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; } SCSS
Referências Referências https://css-tricks.com/snippets/css/a-guide-to-flexbox http://www.w3.org/TR/css-flexbox-1/ https://developer.mozilla.org/pt- BR/docs/CSS/Usando_caixas_flexiveis_css http://www.livrosdomaujor.com.br/css3/index.php
Sites uteis Sites uteis http://flexiejs.com/playground/ http://the-echoplex.net/flexyboxes/
Obrigado. Obrigado.