10

Eu estive pesquisando melhor a funcionalidade (valores) display e suas funcionalidades. Percebi que ela possui muitas possibilidades. Algumas bem óbvias e outras um tanto complexa para o desenvolvedor iniciante.

Acredito que essas funcionalidades abaixo são as mais confusas para o desenvolvedor iniciante:

  • flex
  • inline-flex
  • list-item
  • run-in (essa é uma que eu nunca vi ser utilizada)
  • table-cell

Como elas são usada?

Alguma dessas funcionalidades são essências para o design responsivo?

Algum bom exemplo de utilização?

2
  • 2
    Pergunta interessante, jovem .+1 14/03/2017 às 17:11
  • @WallaceMaxters muito obrigado
    – Asura Khan
    15/03/2017 às 22:45

2 Respostas 2

9

Olá! Posso de repente esclarecer algumas dessas dúvidas. Eu diria que nenhuma dessas são "essenciais" para o design responsivo, porém a flex é uma muito utilizada para tal, hoje em dia, já que ela foi feita para facilitar o design fluido.

• O flex: Facilita a responsividade e fluidez com novos atributos que simplificam coisas que geralmente são bem mais complexas de atingir com um block. Exemplo: É muito simples alinhar verticalmente elementos em flex.

• O inline-flex: Vejo ser utilizado bem menos, mas creio eu que deve dar funções de flex para elementos inline que são geralmente como texto. Estou para ver ser mais utilizado.

• O list-item: É o default de elementos em lista ul, li. O objeto será formatado como lista.

• O run-in: Essa é simplesmente para alinhar um header ao texto. Como nesse exemplo:

inserir a descrição da imagem aqui

• O table-cell: É o default de células de tabela.

5

A propriedade display é a propriedade mais importante do CSS para controlar o layout, o valor padrão pode varias de elemento para elemento, de modo geral o valor padrão é display:block ou display:inline.
Abaixo listarei somente as funcionalidade classificas como funcionalidades mais confusas de acordo com a pergunta, p/ acessar uma lista com todas as funcionalidades e seus exemplos de uso segue o link: w3schools css display

  • flex

A propriedade flex específica o comprimento do item, em relação ao restante dos itens flexíveis dentro do mesmo container, de certa forma ela adapta o item em questão em relação aos outros itens flexíveis.

  • inline-flex

A diferença entre inline-flex e flex é que o inline-flex não faz os itens flex serem exibidos em uma única linha, ele mostra o container flexível em linha como um todo.

  • list-item

Um elemento renderizado com a propriedade list-item terá o mesmo comportamento de um elemento block, além disso essa propriedade vai gerar um marcador(marker box), seu estilo pode ser alterado através da propriedade list-style

  • run-in

A propriedade run-in funciona do seguinte modo: Se a caixa run-in contém uma caixa block, funciona como um bloco; Se uma caixa block segue a caixa run-in, a caixa run-in torna-se a primeira caixa inline da caixa bloco. Este propriedade é utilizada por exemplo, para juntar um cabeçalho a um texto abaixo dele sem prejudicar a semântica em questão e para prevenir futuros erros que poderiam aparecem forçando a posição com outras técnicas de layout. P/ mais informações sobre a propriedade run-in:CSS tricks run-in

  • table-cell

Faz com que o elemento se comporte como uma <td>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .