Início / coding / Perguntas / 77955922
Accepted
erics15
Asked: 2024-02-07 23:13:37 +0800 CST

Layout flexível e tentativa de fazer flex-wrap abaixo de um determinado ponto de interrupção

  • 772

Tenho um layout relativamente simples onde tenho um módulo com algum conteúdo. Gostaria que a barra de progresso e o texto denominado "partes" e "projetos" ficassem abaixo da imagem e se expandissem para toda a largura do módulo quando a janela ficar abaixo de 640px. O que eu tenho parece não funcionar. Alguma ideia? Obrigado. O texto do título deve ficar próximo à imagem em todos os tamanhos.

<script src="https://cdn.tailwindcss.com"></script>

<div class="rounded-2xl flex bg-[#3B4E6A]">
  <div class="flex">
    <div class="h-20 w-20 md:w-[160px] md:h-[160px] mr-1 md:mr-1 md:ml-0.5 flex-shrink-0 m-1">
      <img src="https://placehold.co/120x120">
    </div>
  </div>
  <div class="w-10/12">
    <p class="mb-9 text-white font-semibold text-lg lg:text-2xl mt-1 ">some stuff here</p>
    <div class="w-full bg-white rounded-full h-1 text-white"> Bar </div>
    <div class="flex mt-2 align-bottom sm:align-baseline">
      <div class="text-white mt-[12px]"><span class="font-medium"></span> <span>Item 1</span></div>
      <div class="text-white ml-1 mt-[12px]"><span class="font-medium"></span> <span>Item 2</span>
      </div>
    </div>
  </div>
</div>
</div>

css

1 respostas

  1. Best Answer

    Para fazer com que a barra de progresso e o texto denominado "partes" e "projetos" fiquem abaixo da imagem e se expandam para toda a largura do módulo quando a largura da janela estiver abaixo de 640px, você pode usar técnicas de design responsivo. Você pode conseguir isso ajustando o layout usando flexbox e consultas de mídia. Abaixo está o código modificado:

    <div class="rounded-2xl flex flex-col md:flex-row bg-[#3B4E6A]">
    <div class="md:w-[100px] md:h-[100px] lg:w-[160px] lg:h-[160px] m-1 flex-shrink-0">
        <img src="https://placehold.co/400x400"> 
    </div>
    <div class="w-full md:w-10/12">
        <p class="mb-4 text-white font-semibold text-md lg:text-2xl mt-1 w-full xl:w-2/4"> Title stuff here</p>
        <!--this part should go below the image and expand to the full width of the module - the bar ,the and the parts and projects text-->
        <div class="flex flex-wrap">
            <div class="w-full bg-white progressBar dark:bg-gray-progressBar rounded-full h-[10px] sm:mb-3">
                <!-- Progress bar content here -->
            </div>
            <div class="flex w-full mt-3 text-white">
                <div class="w-1/2 md:w-auto flex items-center">
                    <span class="font-medium">1</span>
                    <span class="ml-1">Parts</span>
                </div>
                <div class="w-1/2 md:w-auto flex items-center">
                    <span class="font-medium">1</span>
                    <span class="ml-1">Projects</span>
                </div>
            </div>
        </div>
    </div>
</div>
    1. Envolveu o conteúdo dentro de um contêiner flexível flex-colpara layout móvel e md:flex-rowpara telas maiores.
    2. Ajustada a largura do contêiner de imagem e do contêiner de conteúdo usando classes baseadas no tamanho da tela ( md:w-[100px], md:w-10/12).
    3. Usado flex-wrappara permitir que o conteúdo passe para a próxima linha, se necessário.
    4. Ajustado o layout do texto de "peças" e "projetos" para ocupar largura total em telas menores ( w-fullpara dispositivos móveis e w-1/2para telas maiores).
    5. Adicionada flexclasse para garantir o alinhamento adequado do texto de "peças" e "projetos".
    • 1

relate perguntas