Criar uma lista HTML horizontal com Flexbox

<div class="faixa">
	<ul>
	   <li><a href="/./">Casa</a></li>
    	   <li>Apartamento</li>
    	   <li>Chalé</li>
    	   <li>Cabana</li>
    	   <li>Sobrado</li>
	</ul>
</div> 

CSS

2. Agora vamos fazer a nossa lista ficar na posição horizontal. Para isto, utilizaremos o "display: flex;"  atributo do Flexbox  que irá colocar a lista em um linha, mas mantendo o conteúdo como um bloco HTML.

.faixa ul {
	display: flex;
}

.faixa ul li {
     list-style-type: none;
    padding-right: 14px;
}

Onde:

• display: flex; - define que todos itens da lista não ordenada "ul" será alinhadas de forma flexível. Por padrão do Flexbox, os itens serão alinhados em linha (row).
• list-style-type: none; - exclui os marcadores de cada item da lista;
• padding-right - define um espaço de 4px à direita para cada item da lista;

Observação: Os atributos CSS estão definidos para os elementos ul e li apenas para a classe "faixa" (.faixa ul {} e .faixa ul li {})

Resultado Final 

Veja agora a nossa lista HTML alinhada horizontalmente:

See the Pen VQXYaG by Angelo Luis Ferreira (@angeloalf) on CodePen.

TENTE VOCÊ MESMO

Veja no nosso editor HTML como foi feito o alinhamento horizontal de uma lista HTML. No editor, altere os códigos da forma que você desejar até conseguir o design desejado. Depois é só copiar os códigos e colar no seu projeto. Clique no link abaixo para abrir nosso editor de testes. (Não esqueça de clicar no botão "Executar" para visualizar os resultados).

Tente você mesmo »  

CÓDIGO COMPLETO DO EXEMPLO

Para copiar e colar nos seus projetos.

HTML

<div class="faixa">
	<ul>
	   <li><a href="/./">Casa</a></li>
    	   <li>Apartamento</li>
    	   <li>Chalé</li>
    	   <li>Cabana</li>
    	   <li>Sobrado</li>
	</ul>
</div> 

CSS

.faixa ul {
    display: flex;
}

.faixa ul li {
    list-style-type: none;
    padding-right: 14px;
}

POSICIONANDO UMA LISTA HTML

A grande utilidade do Flexobox está na facilidade em posicionar elementos HTML. No exemplo abaixo mostraremos como posicionar a nossa lista HTML horizontal à direita, à esquerda e e no centro da tela utilizando o Flexobox. Para criar estes posicionamentos, vamos utilizar a propriedade CSS "justify-content" que posiciona um ou mais elementos HTML na direção de como os elementos estão distribuídos, se no sentido horizontal (row - linha) ou no sentido vertical (column - coluna).

Para o nosso exemplo vamos utilizar os valores para o atributo "justify-content" para o sentido horizontal, pois os elementos da nossa lista estão distribuídos em linha:

• justify-content: start; -> para alinhar à esquerda (padrão)
• justify-content: end; -> para alinhar à direita
• justify-content: center; para alinhar ao centro

TENTE VOCÊ MESMO

a) Centralizando nossa lista HTML

CSS

.faixa ul {
	display: flex;
        justify-content: center;
}

.faixa ul li {
    list-style-type: none;
    padding-right: 14px;
}

 Tente você mesmo »  

b) Posicionando a nossa lista HTML à direita

CSS

.faixa ul {
    display: flex;
    justify-content: end;
}

.faixa ul li {
    list-style-type: none;
    padding-right: 14px;
}

Tente você mesmo »