Saya punya divbeberapa anak:

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

dan saya ingin tata letak berikut:

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

Terlepas dari berapa banyak teks di dalam psaya ingin tetap .buttonselalu di bagian bawah tanpa mengeluarkannya dari arus. Saya pernah mendengar ini bisa dicapai dengan Flexbox tetapi saya tidak bisa membuatnya berfungsi.

Anda dapat menggunakan margin otomatis

Sebelum penyelarasan melalui justify-contentdan align-self, setiap ruang bebas positif didistribusikan ke margin otomatis di dimensi itu.

Jadi, Anda dapat menggunakan salah satu dari ini (atau keduanya):

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>

Atau, Anda dapat membuat elemen sebelum atumbuh untuk mengisi ruang yang tersedia:

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>

Anda dapat menggunakan display: flex untuk memposisikan elemen ke bawah, tetapi saya tidak berpikir Anda ingin menggunakan flex dalam hal ini, karena itu akan mempengaruhi semua elemen Anda.

Untuk memposisikan elemen ke bawah menggunakan flex coba ini:

.container {
  display: flex;
}

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

Taruhan terbaik Anda adalah mengatur posisi: absolut ke tombol dan mengaturnya bottom: 0, atau Anda dapat menempatkan tombol di luar wadah dan menggunakan negatif transform: translateY(-100%)untuk membawanya dalam wadah seperti ini:

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

Periksa JSFiddle ini

Solusi dengan align-self: flex-end;tidak bekerja untuk saya tetapi yang ini jika Anda ingin menggunakan flex:

Hasil

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

Kode

Catatan: Saat "menjalankan cuplikan kode" Anda harus menggulir ke bawah untuk melihat tautan di bagian bawah.

.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>

Tidak yakin tentang flexbox tetapi Anda dapat menggunakan properti posisi.

set div position: relative elemen induk dan anak yang mungkin berupa <p>atau <h1>dll. set position: absolutedan bottom: 0.

Contoh:

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;
}

Pena kode di sini.

<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

Saat mengatur tampilan Anda agar fleksibel , Anda bisa menggunakan flexproperti untuk menandai konten mana yang dapat tumbuh dan konten mana yang tidak bisa.

Properti fleksibel

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>

Coba ini

.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>

Saya baru saja menemukan solusi untuk ini.

bagi mereka yang tidak puas dengan jawaban yang diberikan dapat mencoba pendekatan ini dengan flexbox

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>