The latest articles on Forem by Alisson Souza (@alisson1228). https://forem.com/alisson1228 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1253714%2F73d9f43a-fd5f-4da8-9f61-5f53115f67bd.png https://forem.com/alisson1228 en Alisson Souza Wed, 10 Jan 2024 21:14:28 +0000 https://forem.com/alisson1228/como-usar-flex-box-1pij https://forem.com/alisson1228/como-usar-flex-box-1pij <p>O Flex-Box é um modelo de layout web do CSS que pode facilitar o processo de estilização tornando os elementos filhos flexíveis dentro do elemento pai o que facilita processos que antes eram bem mais complicados de serem feitos como:</p> <ul> <li>Centralizar</li> <li>Alinhamento</li> <li>modelagem</li> </ul> <p>Para usar o Flex Box usamos a propriedade display com o valor flex de seguinte maneira:</p> <p><code>display: flex</code></p> <p>Agora vou listar algumas outras propriedades fundamentais para usar o flex box e uma breve descrição:</p> <ul> <li><p><code>flex-direction:</code> - muda a disposição dos elementos filhos dentro do elemento pai.</p></li> <li><p><code>justify-content:</code> - essa propriedade ela faz o alinhamento do eixo principal que é definido com o <code>flex-direction:</code>.</p></li> <li><p><code>align-itens:</code> - já essa cuida de alinhar o eixo secundário que no caso é o oposto ao principal.</p></li> <li><p><code>flex-wrap:</code> - ela vai definir a questão de quebra de de linha no caso quando os elementos filhos ultra pação o espaço do elemento pai ele é redirecionado para a próxima linha.</p></li> </ul> <p>Estas propriedades devem ser implementada no elemento pai já as que vou citar agora deve ser colocadas no elemento filho:</p> <ul> <li><p><code>flex-shrink:</code> - ela possibilita o elemento diminuir de tamanho de acordo com o limite especificado.</p></li> <li><p><code>flex-grow:</code> - semelhante ao anterior ela possibilita o elemento aumentar de tamanho.</p></li> <li><p><code>order:</code> - ira alterar a ordem do elemento de acordo a posição definida.</p></li> <li><p><code>flex-self:</code> - esse vai sobrepor a propriedade <code>align-itens</code> do elemento pai para a definida pelo elemento filho.</p></li> </ul> <p>Para finalizar vou colocar as propriedade com seus valores mais comuns:</p> <ul> <li><p><code>flex-direction: row | row-reverse | column | column-reverse</code></p></li> <li><p><code>justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly</code></p></li> <li><p><code>align-itens: stretch | flex-start | flex-end | center | baseline</code></p></li> <li><p><code>flex-wrap: nowrap | wrap | wrap-reverse</code></p></li> <li><p><code>flex-shrink: 1 | 2 | 3 | ...</code></p></li> <li><p><code>flex-grow: 1 | 2 | 3 | ...</code></p></li> <li><p><code>order: 1 | 2 | 3 | ...</code></p></li> <li><p><code>flex-self: stretch | flex-start | flex-end | center | baseline</code></p></li> </ul> <p>Esse foi o básico de flex-box <strong>Obrigado pela atenção!</strong></p> css frontend webdev