webentwicklung-frage-antwort-db.com.de

Layout einer Flexbox ähnlich einer Tabelle?

Ich arbeite mit einem intern entwickelten Framework, das von einer bestimmten Struktur unseres HTML-Codes abhängig ist. Das Schwierige dabei ist, dass jede Zeile einen eigenen Container mit eigenen Klassen und Datenattributen benötigt.

Also hier ist das Problem. Wie kann ich die Flexbox unter im Wesentlichen wie eine HTML-Tabelle rendern, ohne das DOM drastisch zu ändern? Oder ist ein Tisch der einzige Weg? Die Lösung muss in IE11 und Chrome funktionieren.

Ich versuche es so aussehen zu lassen ...

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>

5
Steve Wortham

Wenn der Inhalt, den Sie präsentieren möchten, vom Typ tabellarische Daten ist, ist die CSS-Tabelle der richtige Weg.

Da dies mit CSS möglich ist, können Sie problemlos zwischen allen Anzeigetypen wie flex, block usw. oder sogar float wechseln, indem Sie die Medienabfrage usw. verwenden.

Ich habe auch das <div class="line-break"></div> -Element entfernt, da Sie dies nicht benötigen. Wenn es jedoch von einer Komponente oder ähnlichem gerendert wird, wird das Beibehalten des Elements kein Problem verursachen.


Wenn Sie Flexbox noch benötigen oder müssen, müssen Sie in dieser Antwort den Unterschied zwischen CSS Table und Flexbox in Bezug auf zwei wichtige Funktionen erwähnen:


Updated, ein Beispiel mit einigen nützlichen Flexbox-Elementen mit unterschiedlichen Spalten für Breite und Breite.

Stack-Snippet - Flexbox ( Fiddle Demo für 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>


Stack-Snippet - CSS-Tabelle

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>

7
LGSon

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
Michael_B