web-dev-qa-db-ger.com

Flexbox-Spalte nach unten ausrichten

Ich versuche Flexbox zu verwenden. http://css-tricks.com/almanac/properties/a/align-content/ Dies zeigt Nizza-Ausrichtungsoptionen. aber ich möchte eigentlich eine Top-Top-Bottom-Situation.

Ich möchte, dass ein div mit flexbox am unteren Rand des übergeordneten div bleibt. Mit flex-direction: column und align-content: Space-between kann ich das tun, aber das mittlere Div wird sich in der Mitte ausrichten. Ich möchte, dass auch das mittlere Div an der Spitze bleibt.

[oben]

[Mitte]

-

-

-

[Unterseite]

align-self: flex-end lässt es nach rechts schweben, nicht nach unten.

vollständige Flexbox-Dokumente: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

41
Laurens Kling

Die Antwort lautet im Grunde, den letzten mittleren Elementen einen Flex-Grow-1-Code wie folgt zu geben:

.middle-last{
  flex-grow: 1; // assuming none of the other have flex-grow set
}

Danke, T04435.

18
T04435

Ich bin ein bisschen spät zur Party, kann aber für andere relevant sein, die versuchen, dasselbe zu erreichen, was Sie tun sollten:

margin-top: auto

auf das betreffende Element und es sollte nach unten gehen. Sollte den Trick für Firefox, Chrom und Safari tun.

90

Ich habe meine eigene Lösung gefunden, ich werde sie hier für den Dokumentationswert hinzufügen;

Wenn Sie den mittleren Block height: 100% angeben, nimmt er den gesamten Raum in der Mitte ein. Der untere Block befindet sich also am tatsächlichen unteren und oberen und mittleren sind oben.

UPDATE: Das funktioniert nicht für Chrome ...

UPDATE: Es wurde eine Methode gefunden, die für FF/Chrome funktioniert: Wenn Sie flex-grow auf eine höhere Zahl (1 ist genug) für [Mitte] setzen, wird die mittlere Größe erreicht. Weitere Informationen: http://css-tricks.com/almanac/properties/f/flex-grow/

12
Laurens Kling

Die align self-Eigenschaft hängt von der Ausrichtung eines Elements in Bezug auf die Querachse ab, nicht von der Hauptachse. Dies ist also nicht der richtige Weg ... Sie haben mehrere Möglichkeiten, dies mit Flexbox zu erreichen:

1) Verwenden Sie Flex-Grow: 1 für Ihren mittleren Artikel. Dadurch wächst der gesamte verbleibende Speicherplatz im Container und drückt das letzte Div nach unten.

2) Refactor dein Layout so, dass es ein Hauptdiv mit justify-content:space-between gibt, so dass dein letztes Div unten bleibt:

.container{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.body{
    display:flex;
    flex-direction:column;
}
.bottom{
    /* nothing needed for the outer layout */
}

<div class="container">
    <div class="body">
        <div>top content</div>
        <div>middle content</div>
    </div>
    <div class="bottom">
        bottom content
    </div>
</div>

3) Dies ist ein bisschen seltsam, aber Sie könnten das sogar mit align-self tun, aber die Biegerichtung umkehren und das Umwickeln von Elementen zulassen:

.container{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
.body{
    display:flex;
    flex-direction:column;
    flex-basis:100%;
}
.bottom{
    align-self:flex-end
}

Ich habe das alles mit diesem kostenlosen Flexbox-Designer getestet: http://algid.com/Flex-Designer

3
Mario Vázquez

In Anbetracht dessen, dass Ihre Website eine grundlegende Struktur hat, haben wir hier eine Lösung, die ich in einer ähnlichen Situation mit nur wenigen Codezeilen verwendet und angewendet habe:

HTML

<div class="site-container">
    <header>your header</header>
    <main>your main with little content</main>
    <footer>your footer</footer>
</div>

CSS

.site-container{
    min-height: 100vh;   //not necessary to calculate the height of the footer
    display: flex;
    flex-direction: column;
}

footer{
    margin-top: auto;
}
0
Jorge Monte

Ich weiß, dass dies ein alter Post ist, aber das gleiche Problem, mit der Flexbox-Ausrichtung für eine Achse, hat mich für eine Stunde verrückt gemacht.

Der automatische Rand ist ein schöner Trick, aber ich wollte meine Lösung mit CSS Grid teilen.

Der important Teil ist die Definition der grid-template-Zeilen . Mit auto haben die Zeilen dieselbe Höhe wie der Inhalt und 1fr belegt den verbleibenden Platz für die mittlere Reihe.

Hier ein schöner Überblick über CSS Grid: https://css-tricks.com/snippets/css/complete-guide-grid/

.container {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-gap: 1em;
  justify-content: center;
}

.top {
  height: 2em;
  width: 10em;
  background-color: blue;
}

.middle {
  height: 3em;
  width: 10em;
  background-color: green;
}

.bottom {
  height: 2em;
  width: 10em;
  background-color: red;
}
<div class="container">
  <div class="top">
    <p>TOP</p>
  </div>
  <div class="middle">
    <p>MIDDLE</p>
  </div>
  <div class="bottom">
    <p>BOTTOM</p>
  </div>
</div>

0
Sebe