Tabellenähnliches Design mit Flexbox

[Gunnar Bittersmann]

@@Reinhard

<div class="main-container">
  <div class="container">
    <span class="titel"><span class="left">titel:</span><span class="right">hier geht es um dies und das</span></span>
    <span class="autor"><span class="left">autor:</span><span class="right">ich</span></span>
    <span class="seiten"><span class="left">seiten:</span><span class="right">1</span></span>
    <span class="woerter"><span class="left">wörter:</span><span class="right">200</span></span>
  </div>
</div>

Das erste div mit der Klasse main-container hat eine fixe Breite von 300px.

Warum? Feste Breiten in Pixel sind im Web selten eine gute Idee.

Und warum denkst du, zwei Container zu benötigen?

Sämtliche div und span sind falsch. Ersetze:

<div class="main-container"> → <table>
<div class="container"> → <tbody>
<span class="titel"> → <tr>
<span class="autor"> → <tr>
<span class="seiten"> → <tr>
<span class="woerter"> → <tr>
<span class="left"> → <th>
<span class="right"> → <td>

Die End-Tags natürlich entsprechend.

jeweils der 1. Buchstabe der span's mit der Klasse left untereinander.

th { text-align: left; font-weight: normal }

Dagegen sollen die Wörter der Klasse right zentriert untereinander stehen.

td { text-align: center }

Hinzu kommt, dass das Wort "titel" vertikal zentriert werden sollte, falls in der rechten Spalte (selbe Zeile) ein zu langer Titel steht und es somit zu einem Zeilenumbruch kommt.

th { vertical-align: middle } ist Default, muss also nicht angegeben werden.

Im Übrigen sind left und right keine sinnvollen Bezeichner für Klassen. Wenn die nicht nebeneinander passen, stehen die Inhalte womöglich untereinander.

LLAP 🖖