Flexbox faz parte da especificação do CSS3 para organizar elementos na página previsivelmente quando o layout precisa ser visualizado em diversos tamanhos de tela e em diversos dispositivos (responsividade).  O Flexbox organiza esses elementos sem a necessidade do float e também resolve problemas de Box Model que geralmente acontecem quando acrescentamos, padding, margin e border além da largura do elemento (fonte: Flexbox – Organizando seu layout - Artigos sobre HTML, JavaScript ...)

Para saber mais sobre Flexbox veja o guia completo: Guia Flexbox Completo - Origamid.com

HTML

1. Primeiro criamos a <div> onde vai as nossas listas HTML. Definimos como "container" a classe que contém todas as nossas div's, ou seja, todas listas HTML.

<div class="container">
  <div>
    <ul>
      <li>Oftalmologia</li>
      <li>Ortopedia</li>
      <li>Otorrinolaringologia</li>
      <li>Cardiologia</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>Segunda-feira</li>
      <li>Quarta-feira</li>
      <li>Sexta-feria</li>
      <li>Sábado</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>08:00 - 12:00</li>
      <li>14:00 - 18:00</li>
      <li>09:00 - 11:00</li>
      <li>10:00 - 12:00</li>
    </ul>
  </div>
 </div> 

 Veja como ficam nossos elementos HTML sem estilos:

CLASSES CSS

2. Agora vamos vamos definir o estilo da classe "container" e dos elementos elementos da lista. Para isto, vamos utilizar o "display: flex;"  atributo do Flexbox  que irá alinhar as listas horizontalmente, mas mantendo o conteúdo como um bloco HTML. Nesta fase vamos alinhar as listas sem cores de fundo, cores e tamanhos de fontes.

Obs: O flexbox posiciona e flexibiliza qualquer elemento HTML como textos, listas, imagens, links, etc.

.container {
      margin: auto;
      max-width: 450px;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
}

.container ul {
      list-style-type: none;
}

.container ul li {
      margin-top: 7px;
      padding-bottom: 3px;
      border-bottom: 1px solid #266fc5;
}    

     Onde:

• margin: auto - Centraliza a div "container" horizontalmente.
• max-width - Define a largura máxima da div em pixels (coloque o valor que desejar);
• display: flex - define que todas as div's com as listas não ordenadas "ul" ficarão alinhadas horizontalmente de forma flexível. Por padrão do Flexbox, os itens serão alinhados em linha (row).
• flex-flow: row wrap - ratifica o alinhamento horizontal (row) e define a possibilidade de quebra de linha caso o tamanho da tela fique menor que o valor definido por max-width (responsividade);
• justify-content -  Define a forma do alinhamento:
  • justify-content: flex-start; // Alinha os itens ao início do container.
  •  justify-content: flex-end; // Alinha os itens ao final do container.
  • justify-content: center; // Alinha os itens ao centro do container.
  • justify-content: space-between; // Cria um espaçamento igual entre os elementos. Mantendo o primeiro     grudado no início e o último no final.
  • justify-content: space-around; // Cria um espaçamento entre os elementos. Os espaçamentos do meio são duas vezes maiores que o inicial e final.
• list-style-type: none - Não mostra marcadores no início dos itens de uma lista não ordenada "ul";
• margin-top - Define a distância da margim superior do início de cada item da lista;
• padding-bottom - Define um espaço a baixo de cada item da lista;

Obs: Uma classe CSS poderá ser colocada no próprio documento HTML através das tags <style> </style> ou inseridas em uma arquivo ".css" externo.

 Veja abaixo como ficou o nosso exemplo:

RESULTADO FINAL

Veja agora  nossas listas alinhadas e com estilos de cores e fontes:

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

TENTE VOCÊ MESMO

Veja no nosso editor HTML como foi feito o alinhamento das listas HTML do exemplo. 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 após modificar o código).

Tente você mesmo »  

CÓDIGO COMPLETO DO EXEMPLO

Para copiar e colar nos seus projetos.

HTML

<div class="container">
  <div>
    <ul>
      <li>Oftalmologia</li>
      <li>Ortopedia</li>
      <li>Otorrinolaringologia</li>
      <li>Cardiologia</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>Segunda-feira</li>
      <li>Quarta-feira</li>
      <li>Sexta-feria</li>
      <li>Sábado</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>08:00 - 12:00</li>
      <li>14:00 - 18:00</li>
      <li>09:00 - 11:00</li>
      <li>10:00 - 12:00</li>
    </ul>
  </div>
 </div> 

 CSS

.container {
  margin: auto;
  max-width: 450px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
    
  padding-right: 35px;
  background-color: #2b4c99;
  color: #fff;
  font-family: arial;
  font-size: 15px;
}
.container ul {
  list-style-type: none;
}

.container ul li {
  margin-top: 7px;
  padding-bottom: 3px;
  border-bottom: 1px solid #266fc5;
} 

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários