Qual é o seu nível flexível? 🐸💪

Olá, eu sou Maneshwar. Estou construindo LiveReview, uma ferramenta privada de revisão de código de IA que é executada na sua chave LLM (Openai, Gêmeos, etc.) com preços altamente competitivos – construídos para pequenas equipes. Verifique e experimente! Então, hoje eu estava trabalhando no layouting da base de Devtool grátis e deixe-me dizer a você-eu lutei … eu chorei … Rage-refrescou o Chrome como 200 vezes. E ainda assim, os layouts não ouviram. Em algum momento, eu disse: “Chega, estou aprendendo Flex hoje!” E então eu tropecei nessa jóia de um site – Flexbox Froggy. Acontece que o Flexbox é menos como CSS e mais como um bootcamp de treinamento de sapos. Então, aqui está uma pequena redação da minha aventura … e você me diz mais tarde: qual é o seu nível flexível? Nível 1: O bebê Flex 🍼 guia este sapo para o lilypad à direita. Tudo o que você precisa é de conteúdo justificado. Flex-Start: itens alinhados ao lado esquerdo do contêiner. Flex-End: itens alinhados ao lado direito do contêiner. CENTRO: Os itens estão alinhados no centro do recipiente. Space Between: Os itens são exibidos com espaçamento igual entre eles. Space-around: Os itens são exibidos com espaçamento igual ao seu redor. #pond {display: flex; ??? } Digite modo de tela cheia de saída de tela cheia #Pond {Display: Flex; Justify-Content: fim; } Digite o modo de tela fullcreen Sair Modo de tela cheia First Flex, Primeira vitória. Confiança = 200%. Nível 2: O Zen centrado 🧘 agora, os sapos querem paz e equilíbrio no meio. Tudo o que você precisa é de conteúdo justificado. Flex-Start: itens alinhados ao lado esquerdo do contêiner. Flex-End: itens alinhados ao lado direito do contêiner. CENTRO: Os itens estão alinhados no centro do recipiente. Space Between: Os itens são exibidos com espaçamento igual entre eles. Space-around: Os itens são exibidos com espaçamento igual ao seu redor. #pond {display: flex; ??? } Digite modo de tela cheia de saída de tela cheia #Pond {Display: Flex; Justify-Content: Center; } Digite o modo de saída de tela cheia de tela cheia, o lago está calmo. Os sapos estão centrados. A vida é boa. Nível 3: Os exploradores espaciais 🚀 Desta vez, os Lilypads querem espaço pessoal. Tipo, distanciamento social adequado. Tudo o que você precisa é de conteúdo justificado. #pond {display: flex; ??? } Digite modo de tela cheia de saída de tela cheia #Pond {Display: Flex; Justify-Content: Space-Around; } Digite o modo de tela fullcreen Sair Fullscreen Mode Frogs inventados Flexbox em 2020, confirmados. Nível 4: Os ativistas da igualdade lilypads estão exigindo espaçamento igual entre eles. Sem os favoritos, sem viés, apenas pura justiça. #pond {display: flex; ??? } Digite modo de tela cheia de saída de tela cheia #Pond {Display: Flex; Justify-Content: Space Between; } Digite o modo de tela cheia de saída de tela cheia Flexbox = Democracy. Nível 5: Teste de gravidade 🔽 Os sapos querem de repente querem relaxar no fundo. Para isso, usamos itens alinhados. Flex-Start: itens alinhados à parte superior do contêiner. Flex-End: itens alinhados à parte inferior do contêiner. CENTRO: Os itens estão alinhados no centro vertical do recipiente. Linha de base: os itens são exibidos na linha de base do contêiner. Alongamento: os itens são esticados para caber no recipiente. #pond {display: flex; ??? } Digite modo de tela cheia de saída de tela cheia #Pond {Display: Flex; Align-itens: Flex-End; } Digite o modo de tela cheia de saída do modo de tela cheia Prova: os sapos são mais densos que a água. Nível 6: Os sapos perfeitos às vezes só querem se encontrar no meio. Use uma combinação de conteúdo justificado e itens alinhados. #pond {display: flex; ??? ??? } Digite modo de tela cheia de saída de tela cheia #Pond {Display: Flex; alinhado-itens: centro; Justify-Content: Center; } Digite o Modo Full -Screen Sair do modo de tela cheia para dois, estilo Lilypad. Nível 7: Space & Chill 🛋️ Mais sapos, mais drama. Alguns querem espaço, outros querem ficar baixos. Use uma combinação de conteúdo justificado e itens alinhados. #pond {display: flex; ??? ??? } Digite modo de tela cheia de saída de tela cheia #Pond {Display: Flex; Align-itens: Flex-End; Justify-Content: Space-Around; } Digite Modo de tela completa Sair do modo de tela cheia Nível de compromisso: Pro. Nível 8: a linha rebelde 🔄 Os sapos decidiram: “Não, vamos virar a ordem.” Use a direção flexível. Linha: os itens são colocados da mesma forma que a direção do texto. ROW-Reversa: os itens são colocados opostos à direção do texto. Coluna: os itens são colocados de cima para baixo. Coluna-reversa: os itens são colocados de baixo para o topo. #pond {display: flex; ??? } Digite modo de tela cheia de saída de tela cheia #Pond {Display: Flex; Direcção flexível: reversa de linha; } Digite o modo de saída do modo de tela completa do caos do modo de tela cheia, mas faça -o CSS. Nível 9: Indo vertical 🏋️‍♂️ Ajuda Os sapos a encontrar sua coluna de lilypads usando a direção flexível. Linha de linha-linha-reversa coluna de coluna-reversa #pond {display: flex; ??? } Digite modo de tela cheia de saída de tela cheia #Pond {Display: Flex; Direcção flexível: coluna; } Digite o modo de tela cheia de sapos de ioga em tela cheia. Nível 10: Psicologia reversa 🪞 Ajuda os sapos a chegar aos seus próprios lilypads. Embora pareçam próximos, serão necessários o Flex-Direction e o Justify-Content. ⚠️ Lembre -se: quando você define a direção para uma linha ou coluna invertida, o início e o final também são revertidos. #pond {display: flex; ??? ??? } Digite modo de tela cheia de saída de tela cheia #Pond {Display: Flex; Direcção flexível: reversa de linha; Justify-Content: Start; } Digite o modo de tela cheia Sair da tela cheia TROLING Developers desde o nível 10. … (e assim por diante, até o chefe final 🐉) Nível 24: O Boss Flex Final Furn. Você dobrou, reverteu, embrulhou, centralizou e justificou todos os sapos existentes. Traga os sapos para casa uma última vez. Justify-Content Align-Items Flex-Direction-Direction-Selin-Self-Self-Self-Wrap Flex-Flow Align-Content #Pond {Display: Flex; ??? ??? ??? } Digite modo de tela cheia de saída de tela cheia #Pond {Display: Flex; FLOW FLEX: REVERSÃO DE REVERSOS DE COLUNA; Justify-Content: Center; Alinhado: Space Between; } Digite o modo de saída do modo de tela cheia que você está agora … um Master Flex. 🧙‍♂️ Aqui está o seu Outro completo apertado, formatado e feito para leitores, mantendo o tom intacto: então … qual é o seu nível flexível? Eu flexionei isso até o nível 24.Or que você? Deixe seu nível flexível nos comentários 👇 Flex de forma responsável, amigos. Além disso, confira o LiveReview Livereview ajuda a obter ótimos comentários sobre o seu PR/MR em alguns minutos. Economiza horas em todos os relações públicas, dando críticas rápidas e automatizadas de primeira passagem. Ajuda os dois engenheiros juniores/seniores a irem mais rápido. Se você está cansado de esperar que seu colega revise seu código ou não esteja confiante de que eles fornecerão feedback válido, aqui está o LiveReview para você.

Fonte