{"id":772,"date":"2024-04-27T10:34:35","date_gmt":"2024-04-27T13:34:35","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=772"},"modified":"2025-11-08T10:17:40","modified_gmt":"2025-11-08T13:17:40","slug":"flexbox-css","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/flexbox-css\/","title":{"rendered":"Flexbox CSS"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

Flexbox CSS<\/strong>: O CSS Flexbox (Flexible Box Module)<\/strong> \u00e9 um modelo de layout revolucion\u00e1rio, ideal para organizar, alinhar e distribuir itens dentro de um cont\u00eainer em uma \u00fanica dimens\u00e3o<\/strong> (linha ou coluna).<\/p>\n\n\n\n

Enquanto o CSS Grid \u00e9 perfeito para o layout<\/em> de p\u00e1gina bidimensional, o Flexbox \u00e9 o padr\u00e3o da ind\u00fastria para alinhar componentes (como bot\u00f5es, menus de navega\u00e7\u00e3o, ou elementos de formul\u00e1rio) de forma eficiente e responsiva.<\/p>\n\n\n\n

Neste artigo, exploraremos a anatomia do Flexbox e as propriedades que regem seu comportamento, divididas entre o Cont\u00eainer<\/strong> (Pai) e os Itens<\/strong> (Filhos).<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. Conceitos Fundamentais e Eixos<\/h2>\n\n\n\n

O Flexbox baseia-se em dois eixos, e todas as propriedades de alinhamento atuam sobre eles:<\/p>\n\n\n\n

Conceito<\/strong><\/td>Defini\u00e7\u00e3o<\/strong><\/td><\/tr><\/thead>
Cont\u00eainer Flex<\/strong><\/td>O elemento pai que define o contexto de Flexbox (display: flex<\/code>).<\/td><\/tr>
Itens Flex<\/strong><\/td>Os filhos diretos do Cont\u00eainer.<\/td><\/tr>
Eixo Principal<\/strong><\/td>A dire\u00e7\u00e3o prim\u00e1ria em que os itens s\u00e3o dispostos (padr\u00e3o: horizontal\/linha). Controlado por flex-direction<\/code>.<\/td><\/tr>
Eixo Cruzado<\/strong><\/td>A dire\u00e7\u00e3o perpendicular ao Eixo Principal (padr\u00e3o: vertical\/coluna).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n

\ud83d\udd11 Inicia\u00e7\u00e3o do Flexbox<\/h3>\n\n\n\n

Para come\u00e7ar, voc\u00ea define o Cont\u00eainer:<\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

.container {\n  display: flex; \/* Transforma o elemento em um container flex\u00edvel *\/\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
2. Propriedades do Cont\u00eainer Flex (Pai)<\/h2>\n\n\n\n
Estas propriedades controlam a orienta\u00e7\u00e3o dos eixos e a distribui\u00e7\u00e3o do espa\u00e7o.<\/p>\n\n\n\n
<\/div>\n\n\n\n
A. Controle dos Eixos (flex-direction<\/code> e flex-wrap<\/code>)<\/h3>\n\n\n\n
Propriedade<\/strong><\/td>Fun\u00e7\u00e3o<\/strong><\/td>Valores Comuns<\/strong><\/td>Efeito<\/strong><\/td><\/tr><\/thead>
flex-direction<\/code><\/strong><\/td>Define a dire\u00e7\u00e3o do Eixo Principal<\/strong>.<\/td>row<\/code> (padr\u00e3o), column<\/code>, row-reverse<\/code><\/td>Altera a dire\u00e7\u00e3o de organiza\u00e7\u00e3o (horizontal ou vertical).<\/td><\/tr>
flex-wrap<\/code><\/strong><\/td>Define se os itens devem quebrar<\/strong> para a pr\u00f3xima linha\/coluna.<\/td>nowrap<\/code> (padr\u00e3o), wrap<\/code><\/td>Se a largura for excedida, wrap<\/code> move itens para a pr\u00f3xima linha\/coluna.<\/td><\/tr>
flex-flow<\/code><\/strong><\/td>Shorthand<\/em> para direction<\/code> e wrap<\/code>.<\/td>row wrap<\/code><\/td>Define a dire\u00e7\u00e3o e permite a quebra em uma \u00fanica linha.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
B. Alinhamento no Eixo Principal (justify-content<\/code>)<\/h3>\n\n\n\n
Controla como o espa\u00e7o livre \u00e9 distribu\u00eddo entre e ao redor dos itens ao longo do Eixo Principal<\/strong> (a dire\u00e7\u00e3o de flex-direction<\/code>).<\/p>\n\n\n\n
Valor<\/strong><\/td>Alinhamento\/Distribui\u00e7\u00e3o<\/strong><\/td><\/tr><\/thead>
flex-start<\/code><\/strong><\/td>Agrupa os itens no in\u00edcio do eixo.<\/td><\/tr>
center<\/code><\/strong><\/td>Centraliza os itens agrupados no eixo.<\/td><\/tr>
space-between<\/code><\/strong><\/td>Distribui o espa\u00e7o igualmente entre<\/strong> os itens (bordas fixas).<\/td><\/tr>
space-evenly<\/code><\/strong><\/td>Distribui o espa\u00e7o igualmente ao redor<\/strong> de cada item (melhor distribui\u00e7\u00e3o visual).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
C. Alinhamento no Eixo Cruzado (align-items<\/code>)<\/h3>\n\n\n\n
Controla o alinhamento dos itens perpendicularmente<\/strong> ao Eixo Principal (o Eixo Cruzado).<\/p>\n\n\n\n
Valor<\/strong><\/td>Alinhamento\/Distribui\u00e7\u00e3o<\/strong><\/td><\/tr><\/thead>
stretch<\/code><\/strong><\/td>Padr\u00e3o. Estica os itens para preencher toda a altura\/largura dispon\u00edvel no eixo cruzado.<\/td><\/tr>
flex-start<\/code><\/strong><\/td>Agrupa os itens no in\u00edcio do eixo cruzado.<\/td><\/tr>
center<\/code><\/strong><\/td>Centraliza os itens no meio do eixo cruzado (\u00f3timo para centraliza\u00e7\u00e3o vertical).<\/td><\/tr>
baseline<\/code><\/strong><\/td>Alinha os itens pela linha de base do conte\u00fado de texto.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
3. Propriedades dos Itens Flex (Filhos)<\/h2>\n\n\n\n
Estas propriedades afetam o item individualmente.<\/p>\n\n\n\n
<\/div>\n\n\n\n
A. flex<\/code> (Grow, Shrink e Basis)<\/h3>\n\n\n\n
A propriedade flex<\/code><\/strong> \u00e9 uma shorthand<\/em> poderosa para controlar como o item se dimensiona dentro do espa\u00e7o livre:<\/p>\n\n\n\n
<\/div>\n\n\n\n
flex: [flex-grow] [flex-shrink] [flex-basis]<\/p>\n\n\n\n
<\/div>\n\n\n\n
Componente<\/strong><\/td>Fun\u00e7\u00e3o<\/strong><\/td>Exemplo<\/strong><\/td><\/tr><\/thead>
flex-grow<\/code><\/strong><\/td>Capacidade de o item crescer<\/strong> e consumir espa\u00e7o extra.<\/td>1<\/code> (cresce na mesma propor\u00e7\u00e3o dos outros)<\/td><\/tr>
flex-shrink<\/code><\/strong><\/td>Capacidade de o item encolher<\/strong> para evitar overflow<\/em>.<\/td>0<\/code> (n\u00e3o encolhe de forma alguma)<\/td><\/tr>
flex-basis<\/code><\/strong><\/td>Tamanho inicial<\/strong> do item antes de crescer\/encolher.<\/td>auto<\/code> ou 200px<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n
Melhor Pr\u00e1tica:<\/strong> O uso mais comum \u00e9 flex: 1<\/code> (que equivale a 1 1 auto<\/code>), fazendo com que o item cres\u00e7a e encolha automaticamente.<\/p>\n<\/blockquote>\n\n\n\n
<\/div>\n\n\n\n
B. Alinhamento e Ordem<\/h3>\n\n\n\n
Propriedade<\/strong><\/td>Fun\u00e7\u00e3o<\/strong><\/td><\/tr><\/thead>
order<\/code><\/strong><\/td>Define a ordem de exibi\u00e7\u00e3o do item (padr\u00e3o \u00e9 0<\/code>). Valores positivos\/negativos reordenam os itens, independentemente da ordem no HTML.<\/td><\/tr>
align-self<\/code><\/strong><\/td>Substitui o alinhamento vertical (align-items<\/code>) do Container para este item espec\u00edfico.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
\u2705 Conclus\u00e3o Flexbox CSS<\/h2>\n\n\n\n
O Flexbox \u00e9 a ferramenta definitiva para o alinhamento unidimensional<\/strong>. Ele transforma a organiza\u00e7\u00e3o de barras de navega\u00e7\u00e3o, formul\u00e1rios e componentes em uma tarefa simples e intuitiva, eliminando a complexidade dos floats<\/code> e position<\/code>. Ao diferenciar as propriedades do Cont\u00eainer (para distribui\u00e7\u00e3o geral) e dos Itens (para dimensionamento individual), voc\u00ea dominar\u00e1 rapidamente a cria\u00e7\u00e3o de interfaces responsivas e robustas.<\/p>\n\n\n\n
Toda jornada tem um in\u00edcio, e o in\u00edcio para se tornar um desenvolvedor web \u00e9 dominar as seguintes tecnologias, que voc\u00ea encontra aqui mesmo:<\/p>\n\n\n\n
\n
\n
\"HTML\"<\/a>
HTML<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"CSS\"<\/a>
CSS<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"Javascript\"<\/a>
JavaScript<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
E se voc\u00ea gosta do nosso conte\u00fado, n\u00e3o deixe de contribuir adquirindo os servi\u00e7os e produtos dos nossos apoiadores e empresas que somos associados:<\/p>\n\n\n\n
\n
\n
\"Hospedagem<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"Ofertas<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"Amazon<\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Tempo de leitura: <\/span>  4<\/span> minutos<\/span><\/span>Flexbox CSS: O CSS Flexbox (Flexible Box Module) \u00e9 um modelo de layout revolucion\u00e1rio, ideal…<\/p>\n","protected":false},"author":1,"featured_media":702,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-772","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpcat-7-id"],"yoast_head":"\nFlexbox CSS - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"Flexbox CSS: Neste artigo, vamos explorar em detalhes o Flexbox, suas propriedades e como utiliz\u00e1-lo para criar designs incr\u00edveis...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thiagorossi.com.br\/blog\/flexbox-css\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flexbox CSS - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"Flexbox CSS: Neste artigo, vamos explorar em detalhes o Flexbox, suas propriedades e como utiliz\u00e1-lo para criar designs incr\u00edveis...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/flexbox-css\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-27T13:34:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-08T13:17:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"758\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Thiago Rossi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thiago Rossi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/flexbox-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/flexbox-css\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"Flexbox CSS\",\"datePublished\":\"2024-04-27T13:34:35+00:00\",\"dateModified\":\"2025-11-08T13:17:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/flexbox-css\\\/\"},\"wordCount\":683,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/flexbox-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/flexbox-css\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/flexbox-css\\\/\",\"name\":\"Flexbox CSS - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/flexbox-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/flexbox-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"datePublished\":\"2024-04-27T13:34:35+00:00\",\"dateModified\":\"2025-11-08T13:17:40+00:00\",\"description\":\"Flexbox CSS: Neste artigo, vamos explorar em detalhes o Flexbox, suas propriedades e como utiliz\u00e1-lo para criar designs incr\u00edveis...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/flexbox-css\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/flexbox-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/flexbox-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"width\":758,\"height\":426,\"caption\":\"CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/flexbox-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flexbox CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"name\":\"THIAGO ROSSI\",\"description\":\"Mais de 20 anos de experi\u00eancia no mercado de TI!\",\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"alternateName\":\"TR | CURSO WEB DEV\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\",\"name\":\"THIAGO ROSSI\",\"alternateName\":\"TR | CURSO WEB DEV\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"width\":300,\"height\":300,\"caption\":\"THIAGO ROSSI\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\",\"name\":\"Thiago Rossi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"caption\":\"Thiago Rossi\"},\"description\":\"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \\\"GDD \u2013 O Guia Definitivo\\\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.\",\"sameAs\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\",\"https:\\\/\\\/instagram.com\\\/thiagorossix86\",\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"],\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/author\\\/thiagorossi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flexbox CSS - BLOG THIAGO ROSSI","description":"Flexbox CSS: Neste artigo, vamos explorar em detalhes o Flexbox, suas propriedades e como utiliz\u00e1-lo para criar designs incr\u00edveis...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thiagorossi.com.br\/blog\/flexbox-css\/","og_locale":"pt_BR","og_type":"article","og_title":"Flexbox CSS - BLOG THIAGO ROSSI","og_description":"Flexbox CSS: Neste artigo, vamos explorar em detalhes o Flexbox, suas propriedades e como utiliz\u00e1-lo para criar designs incr\u00edveis...","og_url":"https:\/\/thiagorossi.com.br\/blog\/flexbox-css\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-04-27T13:34:35+00:00","article_modified_time":"2025-11-08T13:17:40+00:00","og_image":[{"width":758,"height":426,"url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","type":"image\/webp"}],"author":"Thiago Rossi","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Thiago Rossi","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thiagorossi.com.br\/blog\/flexbox-css\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/flexbox-css\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"Flexbox CSS","datePublished":"2024-04-27T13:34:35+00:00","dateModified":"2025-11-08T13:17:40+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/flexbox-css\/"},"wordCount":683,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/flexbox-css\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","articleSection":["CSS"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/thiagorossi.com.br\/blog\/flexbox-css\/","url":"https:\/\/thiagorossi.com.br\/blog\/flexbox-css\/","name":"Flexbox CSS - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/flexbox-css\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/flexbox-css\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","datePublished":"2024-04-27T13:34:35+00:00","dateModified":"2025-11-08T13:17:40+00:00","description":"Flexbox CSS: Neste artigo, vamos explorar em detalhes o Flexbox, suas propriedades e como utiliz\u00e1-lo para criar designs incr\u00edveis...","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/flexbox-css\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/flexbox-css\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/flexbox-css\/#primaryimage","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","width":758,"height":426,"caption":"CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/thiagorossi.com.br\/blog\/flexbox-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Flexbox CSS"}]},{"@type":"WebSite","@id":"https:\/\/thiagorossi.com.br\/blog\/#website","url":"https:\/\/thiagorossi.com.br\/blog\/","name":"THIAGO ROSSI","description":"Mais de 20 anos de experi\u00eancia no mercado de TI!","publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"alternateName":"TR | CURSO WEB DEV","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thiagorossi.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/thiagorossi.com.br\/blog\/#organization","name":"THIAGO ROSSI","alternateName":"TR | CURSO WEB DEV","url":"https:\/\/thiagorossi.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","width":300,"height":300,"caption":"THIAGO ROSSI"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/linkedin.com\/in\/thiagox86"]},{"@type":"Person","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87","name":"Thiago Rossi","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","caption":"Thiago Rossi"},"description":"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \"GDD \u2013 O Guia Definitivo\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.","sameAs":["https:\/\/thiagorossi.com.br\/blog","https:\/\/instagram.com\/thiagorossix86","https:\/\/linkedin.com\/in\/thiagox86"],"url":"https:\/\/thiagorossi.com.br\/blog\/author\/thiagorossi\/"}]}},"_links":{"self":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/comments?post=772"}],"version-history":[{"count":1,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/772\/revisions"}],"predecessor-version":[{"id":4455,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/772\/revisions\/4455"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media\/702"}],"wp:attachment":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media?parent=772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}