Richten Sie ein Element mit der Flexbox nach unten aus

375

Ich habe eine divmit einigen Kindern:

<div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some more or less text</p>
  <a href="/" class="button">Click me</a>
</div>

und ich möchte das folgende Layout:

 -------------------
|heading 1          |
|heading 2          | 
|paragraph text     |
|can have many      |
|rows               |
|                   |
|                   |
|                   | 
|link-button        |
 -------------------

Unabhängig davon, wie viel Text im Text enthalten ist, pmöchte ich den Text .buttonimmer ganz unten festhalten, ohne ihn aus dem Fluss zu nehmen. Ich habe gehört, dass dies mit Flexbox erreichbar ist, aber ich kann es nicht zum Laufen bringen.

Übergröße
quelle
7
Gib es einfach postition: absolute; bottom 0;?
Jonathan
12
@ Jonathan der Wrapper hat keine feste Höhe. Wenn ich es aus dem Fluss nehme, würde es den Text überlappen
Übergröße
2
@supersize altes Q, aber Sie hätten den Wrapper geben können position:relative- es ist doof, weil ich denke, dass es standardmäßig relativ ist, aber Sie haben es SET, damit die absolute Positionierung des Kindes enthalten ist. Dann bottom:0passt bündig.
Jacksonkr
Jacksonkr hat recht, dies ist die BESTE Lösung, andere sind zu lang, zu
kompliziert
2
@Jacksonkr die Standardposition eines Div ist staticnicht relative.
Supersize

Antworten:

641

Sie können automatische Ränder verwenden

Vor der Ausrichtung über justify-contentund align-selfwird jeder positive freie Speicherplatz an die automatischen Ränder in dieser Dimension verteilt.

Sie können also eine davon (oder beide) verwenden:

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */

Alternativ können Sie das Element vor dem aWachsen erstellen, um den verfügbaren Platz zu füllen:

p { flex-grow: 1; } /* Grow to fill available space */

Oriol
quelle
2
Für mich funktioniert dies in Chrome, aber nicht in Safari unter iOS 10.2. Kann jemand bestätigen?
Matthew
@Oriol Ich mag diesen Ansatz, aber nicht den Nebeneffekt des Verlusts kollabierender Ränder. Was würden Sie dagegen tun?
Neil
11
Flex-Grow hat bei mir funktioniert. Hier ist, wie ich es gemacht habehtml { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } #site-content { flex: 1; }
ProtoEvangelion
2
Denken Sie auch daran eine Randnotiz, um height: 100%auf das übergeordnete Element , von dem Sie auf Push etwas nach unten versuchen , mitmargin-top: auto;
skolind
1
"Jeder positive freie Speicherplatz wird auf automatische Ränder in dieser Dimension verteilt." Es sind kleine Dinge wie diese, die so elegant sind. Für mich bestand diese Lösung aus 2 Codezeilen, basierend auf Ihrer Antwort. danke :)
danjah
146

Sie können display: flex verwenden, um ein Element nach unten zu positionieren, aber ich glaube nicht, dass Sie in diesem Fall flex verwenden möchten, da dies alle Ihre Elemente betrifft.

Um ein Element mit Flex nach unten zu positionieren, versuchen Sie Folgendes:

.container {
  display: flex;
}

.button {
  align-self: flex-end;
}

Am besten setzen Sie die Position: absolut auf den Button und setzen Sie sie auf bottom: 0, oder Sie können den Button außerhalb des Containers platzieren und das Negativ verwenden transform: translateY(-100%), um ihn wie folgt in den Container zu bringen:

.content {
    height: 400px;
    background: #000;
    color: #fff;
}
.button {
    transform: translateY(-100%);
    display: inline-block;
}

Überprüfen Sie diese JSFiddle

Roumelis George
quelle
6
Wenn Sie es unten möchten, stellen Sie sicher, dass die Flex-Richtung auf Spalte eingestellt ist.
Viliami
3
Was ist, wenn ich die Höhe nicht angeben kann?
Mark
Was für mich funktionierte war nur: `` `. Inhalt {Anzeige: Flex; Flex-Richtung: Säule; Rechtfertigungsinhalt: Flex-End; } <div class = "content"> <a class="bottom"> Etwas </a> </ div> `` `
gsalgadotoledo
84

Die Lösung mit align-self: flex-end;hat bei mir nicht funktioniert, aber diese hat funktioniert, falls Sie flex verwenden möchten:

Ergebnis

 -------------------
|heading 1          |
|heading 2          | 
|paragraph text     |
|                   |
|                   |
|                   | 
|link button        |
 -------------------

Code

Hinweis: Wenn Sie das Code-Snippet ausführen, müssen Sie nach unten scrollen, um den Link unten zu sehen.

.content {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 300px;
}

.content .upper {
  justify-content: normal;
}

/* Just to show container boundaries */
.content .upper, .content .bottom, .content .upper > * {
  border: 1px solid #ccc;
}
<div class="content">
  <div class="upper">
	  <h1>heading 1</h1>
	  <h2>heading 2</h2>
	  <p>paragraph text</p>
  </div>

  <div class="bottom">
	  <a href="/" class="button">link button</a>
  </div>
</div>

Timo
quelle
1
Inhalt ist der Spaltencontainer, in dem 2 andere Container mit Rechtfertigungsinhalt enthalten sind: Leerzeichen dazwischen; Sie weisen die Flexbox an, den Container so weit wie möglich voneinander wegzuschieben (in diesem Fall begrenzt durch die Höhe des Inhaltscontainers)
ConquerorsHaki
das ist nicht das wirkliche Ergebnis, es wird Platz zwischen jedem Gegenstand haben (daher der Name)
Barbz_YHOOL
1
@Barbz_YHOOL Nein, es funktioniert, wenn Sie die Containerhöhe erhöhen (siehe aktualisiertes Beispiel)
Timo
1
Nach langem Suchen ist dies einfach perfekt! Vielen Dank.
Rudy
1
Mit einer kleinen Änderung funktionierte diese Antwort perfekt für mich, danke
RealMJDev
2

Sie sind sich bei Flexbox nicht sicher, können dies jedoch mithilfe der Positionseigenschaft tun.

setze übergeordnetes div position: relative und untergeordnetes Element, das ein <p>oder <h1>etc sein kann. setze position: absoluteund bottom: 0.

Beispiel:

index.html

<div class="parent">
  <p>Child</p>
</div>

style.css

.parent {
  background: gray;
  width: 10%;
  height: 100px;    
  position: relative;
}
p {
  position: absolute;
  bottom: 0;
}

Codestift hier.

Sanjay Shr
quelle
1
position:fixedwürde nicht funktionieren, weil es dann nicht relativ zu dem Container wäre, in dem es sich befindet. Vielleicht meinten Sie das position:absolute?
Sensoray
1
Während dieser Code die Frage möglicherweise beantwortet, verbessert die Bereitstellung eines zusätzlichen Kontexts darüber, warum und / oder wie dieser Code die Frage beantwortet, ihren langfristigen Wert.
Rollstuhlfahrer
1
Antwort aktualisiert.
Sanjay Shr
1

Geben Sie hier die Bildbeschreibung ein

<section style="display:flex; flex-wrap:wrap;">
    <div style="display:flex; flex-direction:column; flex:1;">
        <button style="margin-top: auto;"/>
    </div>
    <div style="display:flex; flex-direction:column; flex:1;">
        <button style="margin-top: auto;"/>
    </div>
</section>

Demo: https://codepen.io/ferittuncer/pen/YzygpWX

ferit
quelle
0

Wenn Sie Ihre Anzeige auf Flex einstellen , können Sie einfach die flexEigenschaft verwenden, um zu markieren, welcher Inhalt wachsen kann und welcher nicht.

Flex-Eigenschaft

div.content {
 height: 300px;
 display: flex;
 flex-direction: column;
}

div.up {
  flex: 1;
}

div.down {
  flex: none;
}
<div class="content">
  <div class="up">
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <p>Some more or less text</p>
  </div>

  <div class="down">
    <a href="/" class="button">Click me</a>
  </div>
</div>

Tomas Vancoillie
quelle
-1

Versuche dies

.content {
      display: flex;
      flex-direction: column;
      height: 250px;
      width: 200px;
      border: solid;
      word-wrap: break-word;
    }

   .content h1 , .content h2 {
     margin-bottom: 0px;
    }

   .content p {
     flex: 1;
    }
   <div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some more or less text</p>
  <a href="/" class="button">Click me</a>
</div>

Mohxn Ayaz
quelle
-1

Ich habe gerade eine Lösung dafür gefunden.

Wer mit den gegebenen Antworten nicht zufrieden ist, kann diesen Ansatz mit flexbox ausprobieren

CSS

    .myFlexContainer {
        display: flex;
        width: 100%;
    }

    .myFlexChild {
        width: 100%;
        display: flex;

        /* 
         * set this property if this is set to column by other css class 
         *  that is used by your target element 
         */
        flex-direction: row;

        /* 
         * necessary for our goal 
         */
        flex-wrap: wrap;
        height: 500px;
    }

    /* the element you want to put at the bottom */
    .myTargetElement {
        /*
         * will not work unless flex-wrap is set to wrap and 
         * flex-direction is set to row
         */
        align-self: flex-end;
    }

HTML

    <div class="myFlexContainer">
        <div class="myFlexChild">
            <p>this is just sample</p>
            <a class="myTargetElement" href="#">set this to bottom</a>
        </div>
    </div>
aj geh
quelle