Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Exemplo de uso do display flex CSS

11-03-2016 16:30

Nesse post vou deixar um exemplo bem fácil de uso do flex CSS. Vou mostrar aqui um exemplo para ajustar os itens de acordo com o espaço.

Todos os itens serão mostrados em uma única linha. Mas, de acordo com a quantidade de itens eles serão colocados na linha abaixo.

No primeiro exemplo estarei mostrando como usar o display flex com divs.

<style> #pai { display:flex; flex-direction:row; flex-wrap:wrap; width:70px; border:1px solid #ccc; } #filho { width:20px; border:1px solid #eee; } </style> <div id="pai"> <div id="filho">1</div> <div id="filho">2</div> <div id="filho">3</div> <div id="filho">4</div> <div id="filho">5</div> <div id="filho">6</div> <div id="filho">7</div> <div id="filho">8</div> </div>

Agora um exemplo de display flex com ul li lista

<style> #pai { display:flex; margin:0; padding:0; flex-direction:row; flex-wrap:wrap; width:70px; border:1px solid #ccc; } #pai>li { width:20px; border:1px solid #eee; list-style-type:none; } </style> <ul id="pai"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>

Para mais exemplos e referência sobre o display flex acesse esse link https://css-tricks.com/snippets/css/a-guide-to-flexbox/
1
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado