https://github.com/edijunior88/freecodecamp_css_flexbox
Nesse curso, você aprenderá os fundamentos de flexbox e layouts dinâmicos construindo um card do Twitter.
https://github.com/edijunior88/freecodecamp_css_flexbox
css css-flexbox css-grid css-grid-layout css3
Last synced: 3 months ago
JSON representation
Nesse curso, você aprenderá os fundamentos de flexbox e layouts dinâmicos construindo um card do Twitter.
- Host: GitHub
- URL: https://github.com/edijunior88/freecodecamp_css_flexbox
- Owner: EdiJunior88
- License: mit
- Created: 2022-10-11T23:39:48.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-02T16:19:34.000Z (about 1 year ago)
- Last Synced: 2025-01-22T19:24:08.760Z (5 months ago)
- Topics: css, css-flexbox, css-grid, css-grid-layout, css3
- Language: HTML
- Homepage:
- Size: 35.2 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
FreeCodeCamp
CSS Flexbox
O Flexbox é um método de layout poderoso e com bastante suporte, que foi introduzido na versão mais recente do CSS, o CSS3. Com o Flexbox, é fácil centralizar os elementos na página e criar interfaces dinâmicas que diminuem e aumentam de tamanho automaticamente.
Nesse curso, você aprenderá os fundamentos de flexbox e layouts dinâmicos construindo um card do Twitter.
- Usar display: flex para posicionar duas caixas
- Usar os superpoderes do CSS Flexbox no Tweet Embed
- Usar a propriedade flex-direction para criar uma linha
- Usar a propriedade flex-direction para criar linhas no Tweet Embed
- Usar a propriedade flex-direction para criar uma coluna
- Usar a propriedade flex-direction para criar uma coluna no Tweet Embed
- Alinhar elementos usando a propriedade justify-content
- Usar a propriedade justify-content no Tweet Embed
- Alinhar elementos usando a propriedade align-items
- Usar a propriedade align-items no Tweet Embed
- Usar a propriedade flex-wrap para quebrar uma linha ou coluna
- Usar a propriedade flex-shrink para encolher itens
- Usar a propriedade flex-grow para expandir flex items
- Usar a propriedade flex-basis para definir o tamanho inicial de um flex item
- Usar a propriedade abreviada flex
- Usar a propriedade order para reorganizar os itens
- Usar a propriedade align-self
Tecnologias Utilizadas
Para ver todas as tecnologias [clique aqui](/techstack.md)
Tempo Estudando o Curso
