Ir para conteúdo

Pesquisar na Comunidade

Mostrando resultados para as tags ''flexbox''.

  • Pesquisar por Tags

    Digite tags separadas por vírgulas
  • Pesquisar por Autor

Tipo de Conteúdo


Todas as áreas do Fórum

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Encontrar resultados em...

Encontrar resultados que...


Data de Criação

  • Início

    FIM


Data de Atualização

  • Início

    FIM


Filtrar pelo número de...

Data de Registro

  • Início

    FIM


Grupo


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Encontrado 4 registros

  1. Carcleo

    Dificuldades com FlexBox e UL

    Pessoal, estou com uma dúvida que está me tirando o sono! Então, vou exibir 2 situações com Flexbox onde 1 delas está dando uma falha. (Será mesmo?). Nessa versão, com DIV's, tudo funciona bem: CSS: span.vertical { writing-mode: vertical-lr; transform: rotate(180deg); } span.comum { } div.cabecalhoVertical{ display: flex; height: 200px; border: .1px rgb(0,0,0) solid; } div.cabecalhoVertical div { display: flex; flex-grow: 1; list-style: none; border-right: .1px rgb(0,0,0) solid; align-items: center; justify-content: center; } div.cabecalhoVertical div span { text-align: center; font-weight: bolder; } HTML: <div class='cabecalhoVertical'> <div style='width:215px;'><span class='comum' >Nome do Gcéu </span></div> <div style='width:215px;'><span class='vertical'>Supervisor</span></div> <div style='width:215px;'><span class='comum' >Líder</span></div> <div style='width:035px;'><span class='vertical'>Houve Supervisão?</span></div> <div style='width:035px;'><span class='vertical'>Houve dia de Jejum?</span></div> <div style='width:035px;'><span class='vertical'>Houve dia de Evangedismo?</span></div> <div style='width:035px;'><span class='vertical'>Membros Compromissados</span></div> <div style='width:035px;'><span class='vertical'>Visitantes</span></div> <div style='width:035px;'><span class='vertical'>Crianças de 0 à 12 anos</span></div> <div style='width:035px;'><span class='vertical'>Total de presentes</span></div> <div style='width:035px;'><span class='vertical'>Ofertas</span></div> <div style='width:035px;'><span class='vertical'>Disicpulados</span></div> <div style='width:035px;'><span class='vertical'>Número de decisões</span></div> </div> Resultado: Agora com UL -> A falha: CSS: span.vertical { writing-mode: vertical-lr; transform: rotate(180deg); } span.comum { } ul.cabecalhoVertical{ display: flex; height: 200px; border: .1px rgb(0,0,0) solid; } ul.cabecalhoVertical li { display: flex; flex-grow: 1; list-style: none; border-right: .1px rgb(0,0,0) solid; align-items: center; justify-content: center; } ul.cabecalhoVertical li span { text-align: center; font-weight: bolder; } HTML: <ul class='cabecalhoVertical'> <li style='width:215px;'><span class='comum' >Nome do Gcéu </span></li> <li style='width:215px;'><span class='vertical'>Supervisor</span></li> <li style='width:215px;'><span class='comum' >Líder</span></li> <li style='width:035px;'><span class='vertical'>Houve Supervisão?</span></li> <li style='width:035px;'><span class='vertical'>Houve dia de Jejum?</span></li> <li style='width:035px;'><span class='vertical'>Houve dia de Evangedismo?</span></li> <li style='width:035px;'><span class='vertical'>Membros Compromissados</span></li> <li style='width:035px;'><span class='vertical'>Visitantes</span></li> <li style='width:035px;'><span class='vertical'>Crianças de 0 à 12 anos</span></li> <li style='width:035px;'><span class='vertical'>Total de presentes</span></li> <li style='width:035px;'><span class='vertical'>Ofertas</span></li> <li style='width:035px;'><span class='vertical'>Disicpulados</span></li> <li style='width:035px;'><span class='vertical'>Número de decisões</span></li> </ul> Percebam agora na print como aparece um bloco adicional no lado esquerdo antes da primeira LI Gostaria de saber 2 coisas: 1) Porquê isso acontece uma vez que list-style está setado para none nas LI's? 2) Como corrigir essa falha? Obrigado a quem puder ajudar.
  2. Como inserir atributos flexbox no autocompletar do dw cs6
  3. Eu consegui deixar ele assim, porém tive que usar margin pra fazer isso, e sei que não está correto, alguém pode me ajudar?
  4. Luccallp

    Dúvida com Flexbox

    space-between. Flex items são igualmente distribuídos na linha (se o espaço de sobra for negativo ou houver somente um flex item na linha, o comportamento é idêntico a flex-start) MEU CSS: #catalogoList { width: 70%; margin-left: 3%; margin-right: 5%; padding-bottom: 15px; border-top: 2px solid #8A7E7B; float: right; height: 300px; margin-top: 50px !important; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; } #catalogoList .item { width: 24%; height: 360px; border: 1px solid #D9D9D9; margin-top: 15px; transition: 0.5s cubic-bezier(.77,.43,.42,1.34); overflow: hidden; position: relative; } No caso, são 4 blocos por linha, acontece que na última linha não tem 4 blocos, as vezes 2 ou 3 e ele acaba alinhando nas duas extremidades laterias (estou ciente do justify-content: space-between), mas não tem como fazer ele se comportar de outra forma, como o flex-start quando não tiver itens suficientes para preencher essa linha?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.