post

Scroll horizontal DIV com display flex CSS

Publicado em: 03/06/2022

Categorias: BlogCSS

Para criar um efeito deslizante horizontalmente com CSS, é possível usar varias formulas para se chegar praticamente no mesmo resultado.

Abaixo vou mostrar como criar este efeito, apenas usando o CSS, através da propriedade display: flex

<div class="grade">
  <div>
    <h3>Titulo</h3>
    <p>Texto</p>
  </div>
  <div>
    <h3>Titulo</h3>
    <p>Texto</p>
  </div>
  <div>
    <h3>Titulo</h3>
    <p>Texto</p>
  </div>
  <div>
    <h3>Titulo</h3>
    <p>Texto</p>
  </div>
  <div>
    <h3>Titulo</h3>
    <p>Texto</p>
  </div>
</div>

<!-- CSS Fundamental -->
<style>
  .grade {
    display: flex;
    max-width: 100%;
    overflow-x: scroll;
  }
  .grade > div {
    min-width: 100px;
    width: 100%;
  }
</style>

<!-- CSS Opcional -->
<style>
  .grade > div {
    background: #ccc;
    padding: 20px;
    border-radius: 20px;
    margin: 10px;
    text-align: center;
  }
  body {
    max-width: 1000px;
    margin: auto;
  }
</style>

Veja o exemplo funcionando na pagina: https://scroll-horizontal-div-com-display-flex-css.brunoalbim.repl.co/

Link de compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/1744

ID de Referência: 1744

Sugira uma publicação

Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários