Tabellenähnliches Design mit Flexbox

[Reinhard]

Hey,

ich habe gerade ein paar Schwierigkeiten mit Flexbox: ich habe 4 Zeilen mit jeweils 2 Spalten.
Ungefähr so (nur dass die rechte Spalte zentriert sein soll):

| titel: | hier geht es um dies und das | autor: | ____________________________ich | seiten: | _________________________________1 | wörter: | ____________________________200

In HTML folgende Struktur:

<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. Das zweite div mit der Klasse container soll horizontal mittig davon platziert werden.
In jenem zweiten div soll nun dieses Tabellendesign zu sehen sein; jeweils der 1. Buchstabe der span's mit der Klasse left untereinander. Dagegen sollen die Wörter der Klasse right zentriert untereinander stehen. Dazwischen ein wenig Freiraum.
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. Bei den anderen Zeilen ist sicher, dass die rechte Spalte nicht zu lang wird.

Ich habe schon ziemlich lange herum probiert; haufenweise CSS-Eigenschaften in den Suppentopf geschmissen, umgerührt und geschaut ob es passt. Bestimmt ist die Lösung simpel, nur scheint sie sich vor mir zu verstecken. Ich hoffe ihr könnt mir da weiterhelfen.

Reinhard

[Cecille Citrus]

| titel: | hier geht es um dies und das | autor: | ____________________________ich | seiten: | _________________________________1 | wörter: | ____________________________200

Bestimmt ist die Lösung simpel, nur scheint sie sich vor mir zu verstecken.

Du hast tabellarische Daten, die tabellarisch dargestellt werden sollen. Das Element <table> ist keine Krankheit, verwende es.

[MrMurphy1]

Hallo,

für dein Vorhaben sind span-Elemente ungeeignet. Dafür bietet sich eher das dl-Element an.

Die beiden div sind überflüssig, außer du hälst uns Informationen vor.

Dadurch wird das HTML auch viel übersichtlicher als deine span-div-Orgie.

<dl class="main-container">
   <dt>Titel:</dt>
   <dd>Hier geht es um dies und das</dd>
   <dt>Autor:</dt>
   <dd>Ich</dd>
   <dt>Seiten:</dt>
   <dd>1</dd>
   <dt>Worte:</dt>
   <dd>200</dd>
</dl>

Das CSS für Flexbox ist wie flexbox-üblich sehr einfach:

/*Flexbox*/
dl.main-container {
   display: flex;
   flex-wrap: wrap;
}
.main-container dt {
   flex: 1 1 20%;
}
.main-container dd {
   flex: 1 1 70%;
}

Vom restlichen CSS ist nur das margin-left: 0 (bzw. margin: 0) für das dd-Element erforderlich, der Rest dient nur der Optik und kann von dir entsprechend angepasst werden. Die 300px Gesamtbreite hattest du ja vorgegeben, die können natürlich auch geändert werden.

/*Restliches CSS*/
dl.main-container {
   width: 300px;
   padding: 0.5rem;
   border: 1px solid black;
   margin: 0 auto;
}
.main-container dt {
   padding: 0.3rem;
   border: 1px solid silver;
}
.main-container dd {
   text-align: center;
   padding: 0.3rem;
   border: 1px solid silver;
   margin: 0;
}

Gruss

MrMurphy

[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 🖖