• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Flexbox Problem

T

Tronjer

Senior HTML'ler
Nachfolgend eine Liste, bei der in jedem Element 3 Divs stehen, die unterschiedlich lang sind und linksbündig angeordnet sein sollen. Ich habe etwas mit flex-grow gefiddlet, aber irgendwie klappt es nicht.

https://jsfiddle.net/upnf67ao/

HTML: 
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    ul {
      list-style: none;
      margin-top: 50px;
      padding: 0;
    }
    li {
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
      padding-bottom: 12px;
    }
  </style>
</head>
<body>
  <div class="container">
    <ul>
      <li>
        <div class="label">Short Label</div>
        <div class="text">Wall of Text</div>
        <div class="value">123</div>
      </li>
      <li>
        <div class="label">Ultra Long Label</div>
        <div class="text">Foo</div>
        <div class="value">123456</div>
      </li>
      <li>
        <div class="label">Just another Label</div>
        <div class="text">Foo Bar</div>
        <div class="value">123666777788</div>
      </li>
    </ul>
  </div>
</body>
</html>
 
Also soll jeder Container in der Reihe jeweils 1/3 Platz einnehmen, der Content im Container soll aber linksbündig angeordnet sein?

In dem Falle erweiter einfach dein CSS um Folgendes (Fiddle):
CSS: 
li > div {
  width: 100%;
}

oder
CSS: 
li > div {
  flex-basis: 100%; // 33.33% würde auch gehen. Wenn du flex-wrap benutzt macht es aber einen Unterschied
}

flex-grow hat hier nichts zu suchen, es sei denn du möchtest bestimmte Elemente breiter machen als andere. Du brauchst es nicht, wenn alle Elemente gleichbreit sein sollen. Die Kombination mit flex-basis würde sich hier auch nicht wirklich vertragen.
 
Zuletzt bearbeitet:
Nicht ganz. Der Content soll linksbündig untereinander stehen, aber die Container nur so breit sein, wie der längste Inhalt. Also im ersten Listelement .text und im dritten .value,
 
Beim Grid hätte ich ja auch Abstand zum rechten Rand und keine dynamische Spaltenbreite.

Das Ganze soll visuell hinterher so aussehen.

foo.png
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben