Colocar uma caixa flexível semelhante a uma mesa?

Question

Colocar uma caixa flexível semelhante a uma mesa?

Estou a trabalhar com uma estrutura desenvolvida internamente que depende de uma certa estrutura do nosso HTML. E uma das coisas complicadas é que cada linha precisa de seu próprio recipiente com suas próprias classes e atributos de dados.

Então aqui está o problema. Sem mudar drasticamente o DOM, como posso fazer a caixa de flex abaixo renderizar essencialmente como uma tabela HTML faria? Ou uma mesa é a única maneira? A solução terá de funcionar tanto no IE11 como no Chrome.

Estou a tentar que pareça comer...

Column A      |      Column B      |      Column C
1             |      2             |      3

section {
  display: flex;
  flex-wrap: wrap;
}

section .col {
  flex: 1 1 auto;
}

section .line-break {
  flex-basis: 100%;
  width: 0px; 
  height: 0px; 
  overflow: hidden;
}

<html>
  <head>
  </head>
  <body>
    <section>
      <header>
        <div class="col">Column A</div>
        <div class="col">Column B</div>
        <div class="col">Column C</div>
      </header>
      <div class="line-break"></div>
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
      </div>
    </section>
  </body>
</html>

3

html css css3 flexbox

Author: Steve Wortham, 2018-02-01

Source

2 answers

header, .row {
  display: flex;  /* aligns all child elements (flex items) in a row */
}

.col {
  flex: 1;        /* distributes space on the line equally among items */
}

<section>
  <header>
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </header>
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
  </div>
</section>

0

Author: Michael_B, 2018-02-01 19:20:58

score 6 · Accepted Answer

Se o conteúdo que vai apresentar for do tipo dados tabulares , Então a tabela CSS é a maneira correcta.

Uma vez que isto pode ser feito usando CSS, você pode facilmente trocar entre qualquer tipo de visualização, como flex, block, etc., ou mesmo float, Usando pesquisa de mídia, etc.

eu também removi o elemento <div class="line-break"></div>, uma vez que você não precisa, embora se ele é renderizado por um componente ou similar, deixá-lo como está não vai causar nenhum problema.

Se ainda precisar, ou tem que, usar Flexbox, esta minha resposta mencionar a diferença entre a tabela CSS e Flexbox em duas características importantes:

a flexbox consegue lidar com vários tamanhos de colunas, mas com uma altura consistente da linha?

Atualizado, uma amostra mostrando algumas coisas úteis Flexbox, com diferentes colunas de largura e espaço.

snack excerto-Flexbox (demonstração de violino para IE11)

.tbl {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  min-height: 50px;
}
.cell {
  flex: 4;
  border: 1px solid red;
}
.cell:nth-child(1) {
  flex: 1;
}
.cell:nth-child(2) {
  flex: 2;
}
.cell.span4-5 {
  flex: 8 24px;                    /*  col 4,5 flex-grow/border/padding  */
}
.cell.span3-4 {
  flex: 8 24px;                    /*  col 3,4 flex-grow/border/padding  */
}
.cell.span3-5 {
  flex: 12 36px;                   /*  col 3,4,5 flex-grow/border/padding  */
}
.row:first-child .cell {
  display: flex;
  justify-content: center;         /*  center horiz. */
  align-items: center;             /*  center vert. */
}
.row .cell {
  padding: 5px;
  box-sizing: border-box;
}

<div class="tbl">
  <div class="row">
    <div class="cell">ID </div>
    <div class="cell">Nr </div>
    <div class="cell">Header 1 </div>
    <div class="cell span4-5"> Header 2 </div>
  </div>
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">Content</div>
    <div class="cell">Content</div>
    <div class="cell">Content</div>
  </div>
  <div class="row">
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell span3-5">Content</div>
  </div>
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell span3-4">Content</div>
    <div class="cell">Content</div>
  </div>
</div>

Tabela de excertos da pilha

section {
  display: table;
  width: 100%;
}

section > * {
  display: table-row;
}

section .col {
  display: table-cell;
}

<html>
  <head>
  </head>
  <body>
    <section>
      <header>
        <div class="col">Column A</div>
        <div class="col">Column B</div>
        <div class="col">Column C</div>
      </header>
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
      </div>
    </section>
  </body>
</html>