Como usar Flexbox
Posicionando elementos facilmente com poucos comandos. Esta página possui 3 seções, mostrando como utilizar a flexbox na prática. Avance para as próximas páginas se quiser pular esta parte.
Para começar a usar a flexbox, você deve definir um container e os itens dentro dele.
CSS:
HTML:
Exemplo:
O retângulo roxo é o container, e os quadrados laranjas são os itens.
Agora vamos ver como centralizar os itens com flexbox no CSS. Para ativar a flexbox, use display:flex;
CSS:
HTML:
Para alinhar horizontalmente, use justify-content:center;
Para alinhar verticalmente, use align-items:center;
Distribuir os itens com o mesmo espaço entre eles e entre as bordas
justify-content:space-around;Distribuir os itens com o mesmo espaço entre eles
justify-content:space-between;Ou ainda, você pode definir o espaço entre os itens com gap:
gap:70px;Mudando a direção da flexbox para coluna:
Por padrão, a flexbox já é configurada em flex-direction:row;, ou seja, alinhando os itens em linha horizontal. Porém, é possivel alterar isso utilizando flex-direction:column;
A flexbox em direção de coluna obedece aos mesmos comandos vistos acima.
Quando este comando é utilizado, os papéis dos comandos justify-content e align-items se invertem, portanto o align-items agora irá alinhar horizontalmente, e o justify-content irá alinhar verticalmente.
Agora veremos como usar isso na prática, na próxima pagina.