Na movimentada cidade de Petville, Jordan, um desenvolvedor web, é encarregado de redesenhar o site "Pet's House".
Este laboratório cria um layout responsivo e visualmente atraente para os donos de animais de estimação. O site deve apresentar serviços, informações sobre nós e informações de contato de forma eficaz em todos os dispositivos. Jordan decide utilizar Flexbox por suas poderosas capacidades de layout.
Para começar com Flexbox, você precisa entender seus conceitos básicos.
Imagine que você é um designer de interiores, e sua página web é uma grande sala vazia. Seu trabalho é tornar esta sala aconchegante e esteticamente agradável. Entre em cena o Flexbox, sua varinha mágica, ajudando você a posicionar móveis (ou seja, elementos da página web) sem esforço. Seja um sofá (conteúdo principal) ou uma mesa de centro (informações de suporte), com Flexbox, você pode garantir que todos estejam perfeitamente posicionados.
Antes de colocarmos as mãos na massa com Flexbox, vamos rever rapidamente alguns conceitos fundamentais:
Para começar a usar Flexbox, você primeiro precisa declarar um Flex container. É como dizer: "Ok, vamos decorar esta sala."
.container {
display: flex;
}Depois de fazer isso, todos os filhos diretos da classe .container se tornam Flex items, seguindo as regras de layout do Flexbox.
A propriedade CSS display define se um elemento é tratado como uma caixa de bloco ou inline e o layout usado para seus filhos, como layout de fluxo, grid ou flex.
Podemos usar o atributo display para alterar a forma como os elementos in-line são dispostos, por exemplo:
display: block dá aos elementos seu próprio espaço, enquanto display: inline-block permite um layout mais flexível, permitindo que os elementos fiquem lado a lado, mas ainda controlando suas dimensões.
Agora que sabemos como o display é usado, podemos adicionar o seguinte a style.css:
.navigation li {
display: inline-block;
}
.navigation li a {
text-decoration: none;
color: black;
padding: 10px;
display: block;
}
form .form-content {
display: block;
padding: 0.8em 0;
}No reino do Flexbox, dois conceitos são cruciais: eixo principal (main axis) e eixo cruzado (cross axis). Por padrão, o eixo principal é horizontal e o eixo cruzado é vertical, mas isso pode ser ajustado com a propriedade flex-direction.
flex-direction: row; (padrão)flex-direction: column;Por exemplo:
Agora, vamos falar sobre como posicionar nossos móveis (Flex Items).
justify-content: Esta propriedade controla como os Flex items são distribuídos ao longo do eixo principal. Imagine ajustar a distância entre um sofá e cadeiras para garantir que não estejam muito distantes nem muito próximos.align-items: Esta propriedade decide como os Flex items se alinham ao longo do eixo cruzado. É como garantir que todas as suas pinturas estejam penduradas no mesmo nível, tornando a sala com uma aparência organizada.flex-grow: Imagine que você quer que sua estante ocupe todo ou parte do espaço restante. Com esta propriedade, você pode "crescer" uma peça de mobiliário (item) para preencher o espaço extra.Vamos ver a mágica do Flexbox em ação com um layout simples, consistindo em um container e três itens. O que queremos fazer é centralizar esses três itens horizontalmente dentro do container e garantir que eles sejam distribuídos uniformemente quando houver espaço suficiente.
Com esta configuração, nossos móveis (itens) serão posicionados exatamente como desejamos.
Flexbox é realmente como mágica, permitindo que organizemos nossas páginas web com flexibilidade e facilidade sem precedentes. Agora que você dominou essa mágica, vá em frente e experimente! Crie a "sala" dos seus sonhos!
Para demonstrar vividamente a mágica do Flexbox, gerarei uma ilustração mostrando uma sala com layout Flexbox, incluindo peças de mobiliário (como um sofá, mesa de centro e estante) representando diferentes Flex items. Isso mostrará como eles são elegantemente posicionados na sala usando propriedades Flexbox como justify-content e align-items.
Para resumir, Flexbox é um modelo de layout unidimensional que permite alinhar facilmente itens horizontalmente ou verticalmente, e é perfeito para criar designs responsivos. Aqui estão alguns termos-chave para conhecer:
Agora que sabemos como usar Flexbox, podemos adicionar o seguinte a style.css:
body {
display: flex;
flex-direction: column;
letter-spacing: 2px;
font-weight: 400;
font-size: 1.2vw;
}
header {
display: flex;
flex-direction: row;
background-color: rgb(233, 174, 87);
width: 100%;
max-height: max-content;
min-height: 1em;
padding-top: 1%;
padding-bottom: 1%;
text-transform: uppercase;
}
ul {
list-style: none;
display: flex;
flex-direction: row;
}
.navigation-section {
width: 70%;
}
section {
display: flex;
flex-direction: row;
width: 100%;
padding: 10% 0;
}
.story-sect {
display: flex;
flex-direction: row-reverse;
background-color: rgb(233, 174, 87);
color: #fff;
}
.samples {
flex-direction: column;
text-align: center;
}
footer {
display: flex;
flex-direction: row-reverse;
height: 5em;
width: 100%;
color: #fff;
background-color: rgb(239, 206, 157);
text-transform: uppercase;
}Neste laboratório, Jordan aplicou com sucesso o Flexbox ao site "Pet's House", aprimorando a capacidade de resposta e a estética do seu layout. Através de etapas focadas no cabeçalho, navegação e seções principais, o site agora exibe o conteúdo de forma eficiente em diferentes dispositivos. O Flexbox provou ser uma ferramenta inestimável na criação de layouts dinâmicos e flexíveis, demonstrando sua importância no design web moderno.
