Flexbox Problem

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

Tronjer

Senior HTML'ler
8 Oktober 2010
5.231
481
83
Berlin
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>
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.137
234
63
19
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:
  • Like
Reaktionen: Tronjer

Tronjer

Senior HTML'ler
8 Oktober 2010
5.231
481
83
Berlin
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,
 

Tronjer

Senior HTML'ler
8 Oktober 2010
5.231
481
83
Berlin
Beim Grid hätte ich ja auch Abstand zum rechten Rand und keine dynamische Spaltenbreite.

Das Ganze soll visuell hinterher so aussehen.

foo.png
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.998
377
83
67
Mir scheint, das mit der Containerbreite habe ich zunächst nicht richtig verstanden: Du möchtest, dass die rechten Container am rechten Rand anschließen aber die Inhalte linksbündig sind. Das geht so:
Allerdings musste ich dazu Bootstrap heraus nehmen, weil es einem sonst in die Suppe spuckt :D
 
Zuletzt bearbeitet:
  • Like
Reaktionen: Tronjer
Werbung: