https://github.com/monicaquintal/flexbox
Estudo sobre Flexbox (Flexible Box Layout), do Curso Desenvolvimento Web Completo 2022.
https://github.com/monicaquintal/flexbox
css html
Last synced: 3 months ago
JSON representation
Estudo sobre Flexbox (Flexible Box Layout), do Curso Desenvolvimento Web Completo 2022.
- Host: GitHub
- URL: https://github.com/monicaquintal/flexbox
- Owner: monicaquintal
- Created: 2022-10-10T00:57:18.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-10T02:53:42.000Z (over 2 years ago)
- Last Synced: 2025-01-06T08:21:34.284Z (5 months ago)
- Topics: css, html
- Language: HTML
- Homepage:
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## Flexbox (Flexible Box Layout)
Curso Desenvolvimento Web Completo 2022.
### Aula 01: Flexbox - container.
Flexbox:
- é um recurso do CSS 3, um novo módulo de layout;
- permite que se disponha elementos em container de maneira muito mais simples e poderosa;
- permite que deixemos os layout mais flexíveis.
Observações:
- definir "display: flex" no container.
1. flex-direction:
- define as direções que quer alinhar os elementos (flex items);
- parâmetros: row | row-reverse | column | column-reverse;
- com essa propriedade é possível mudar a ordem de exibição dos elementos, sem a necessidade de mudar suas disposições uma a uma no código.
2. flex-wrap:
- define quebras de layout;
- opções: nowrap (é o padrão, define que não há quebra, os itens serão "apertados" para que caibam no container), wrap (só ficam dentro do container os itens que cabem, permite a quebra) e wrap-reverse (exibe os itens em ordem inversa).
3. justify-content:
- alinha os elementos na horizontal;
- possibilidades: flex-start (é o padrão, alinha no canto superior esquerdo), flex-end (cola os conteúdos no canto superior direito), center (centraliza os itens), space-between (distribui os itens adicionando espaçamento entre eles - últimos itens colados nas extremidades e espaço entre os centrais) e space-around (itens nas extremidades tambpem possuem espaçamento, igual os centrais do caso anterior).
4. align-items:
- faz o alinhamento vertical;
- opções: stretch (é a opção padrão, os itens preencherão a área até ocupar a altura do container), center (centraliza os itens, ainda respeitando o justify-content), flex-start (os itens ficam colados na parte superior), flex-end (itens colados na parte inferior) e baseline (utiliza a linha base do texto (superior) para fazer o alinhamento dos itens).
### Aula 02: Flexbox - itens - parte 1.
1. propriedade order:
- é possível criar classes novas e utilizar o atributo "order" para alterar a ordem de exibição dos itens (dentro de um flex item);
- numerar esse atributo com números inteiros (podendo ser negativo; o valor inicial padrão é 0) para definir a ordem.
2. propriedade flex-growth:
- define a proporção de espaço ocupado por um item;
- o padrão é zero; quando é atrubuido valor 1, o item ocupará todo o espaço disponível até o máximo do container. Ao aumentar o número do flex-growth, o item ocupará um espaço maior.
- ou seja, quando maior o número, maior o espaço que ele ocupa.
### Aula 03: Flexbox - itens - parte 2.
1. flex-shrink:
- define a proporção com que um item deve encolher caso seja necessário;
- aceita apenas valores positivos, e seu valor padrão é 1;
- quanto maior o valor, menor o espaço que ocupará.
2. flex-basis:
- indica o tamanho inicial do flex item antes da distribuição do espaço restante;
- pode ser usado inclusive com shrink e growth.
### Observações:
1. O Flexbox não é suportado em todas as versões dos navegadores. Para que o Flexbox funcione adequadamente em navegadores antigos, utilizar este link disponibilizado na aula.
(To start using Flexbox in Internet Explorer 8 & 9 or any older browser, download the flexibility.js script and include it anywhere on your page.)
2. Uso dos Prefixos também é recomendado para o Flexbox.