Neste tutorial, você aprenderá como construir uma estrutura de exemplo para seus projetos da web usando o layout Flexbox em CSS e HTML. Vamos explorar as ferramentas de depuração integradas do Visual Studio Code em conjunto com o Microsoft Edge e dar os primeiros passos para ativar o layout Flexbox. O Flexbox é um sistema de layout poderoso que ajuda a criar layouts complexos com pouco esforço e disposição flexível dos elementos.
Principais conclusões
- Com o Flexbox, você pode alinhar elementos horizontal e verticalmente.
- As Ferramentas de Desenvolvedor do Microsoft Edge podem ser diretamente integradas ao Visual Studio Code.
- Flex-Direction influencia o alinhamento dos elementos Flex.
Guia Passo a Passo
Primeiramente, você irá instalar as Ferramentas do Microsoft Edge no Visual Studio Code. Procure por “Microsoft Edge Tools for VS Code” nas Extensões e instale-as.
Após a instalação da extensão, vá para as opções de Depuração. Clique em “Executar e Depurar” e depois em “criar um arquivo launch.json”. Isso ajudará você a configurar suas configurações.
No arquivo de configuração recém-criado, adicione uma nova configuração para “Microsoft Edge Tools”. Certifique-se de inserir o endereço local como localhost:3000, pois estamos executando o servidor nessa porta no nosso terminal.
Agora é hora de iniciar o seu projeto. Navegue até o diretório correto e execute o comando npm run dev. Em seguida, abra localhost:3000 no seu navegador.
Depois que a página carregar, você pode ativar as Ferramentas de Desenvolvedor do Microsoft Edge clicando no botão correspondente no Visual Studio Code. Isso abrirá a ferramenta de desenvolvedor diretamente ao lado do seu editor.
Agora você pode ver a estrutura da sua aplicação. Temos um Contêiner (div) com a classe "Contêiner Flex". Dentro deste contêiner, existem quatro elementos DIV, cada um com a classe "Filho Flex" e representando o conteúdo de texto 1, 2, 3 e 4, respectivamente.
O Contêiner Flex está atualmente definido com uma largura de 400 pixels e uma altura de 200 pixels, enquanto os Filhos Flex têm uma largura de 100 pixels e uma altura de 50 pixels. Embora nenhum dos filhos esteja atualmente sendo posicionado com Flexbox, eles são exibidos em uma lista vertical.
Para usar o Flexbox ativamente, você precisa adicionar e salvar o atributo CSS display: flex; para o Contêiner Flex. Ao fazer isso, você verá que o arranjo dos filhos muda automaticamente e eles agora são exibidos lado a lado.
Se você deseja reorganizar os Filhos Flex verticalmente novamente, pode usar a propriedade flex-direction. Defina flex-direction: column; para o Contêiner Flex a fim de mudar a orientação dos Filhos Flex de volta para vertical.
Você verá que os Filhos Flex agora estão novamente organizados verticalmente. Ao ajustar a altura e largura, parecerá que estão integrados em um bloco, mesmo que o display não seja configurado como bloco, mas como Flex.
Essa foi uma visão geral das bases do layout Flexbox. No vídeo, discutimos as principais propriedades e vimos seus efeitos. Em futuros tutoriais, exploraremos mais recursos do Flexbox e veremos o que você pode fazer com esse poderoso sistema de layout.
Resumo
Neste tutorial, você aprendeu como criar uma estrutura simples com Flexbox em CSS. Você integrou as Ferramentas de Desenvolvedor do Microsoft Edge no Visual Studio Code e deu os primeiros passos para ativar o layout Flex. Ainda há muitas possibilidades pela frente, que exploraremos nos próximos vídeos.
Perguntas Frequentes
Como ativar o Flexbox no CSS?Você ativa o Flexbox definindo display: flex; para o contêiner.
O que é flex-direction?flex-direction determina a orientação dos Filhos Flex, seja horizontal (row) ou vertical (column).
Como integrar as Ferramentas do Microsoft Edge no Visual Studio Code?Basta procurar por "Ferramentas do Microsoft Edge para o VS Code" na barra de Extensões e instalá-las.
