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.

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 */

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
a {
  margin-top: auto;
}

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

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 */

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
p {
  flex-grow: 1;
}

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

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

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>

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.

<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

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>

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>

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>