Tôi có một divvới một số trẻ em:

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

và tôi muốn bố trí sau:

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

Bất kể có bao nhiêu văn bản trong ptôi muốn .buttonluôn luôn ở phía dưới mà không đưa nó ra khỏi dòng chảy. Tôi đã nghe điều này có thể đạt được với Flexbox nhưng tôi không thể làm cho nó hoạt động được.

Bạn có thể sử dụng lề tự động

Trước khi căn chỉnh thông qua justify-contentvà align-self, bất kỳ không gian trống tích cực nào cũng được phân phối cho lề tự động theo chiều đó.

Vì vậy, bạn có thể sử dụng một trong những (hoặc cả hai):

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>

Ngoài ra, bạn có thể tạo phần tử trước khi atăng để lấp đầy không gian có sẵn:

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>

Bạn có thể sử dụng display: flex để đặt một phần tử xuống phía dưới, nhưng tôi không nghĩ bạn muốn sử dụng flex trong trường hợp này, vì nó sẽ ảnh hưởng đến tất cả các phần tử của bạn.

Để đặt một phần tử xuống đáy bằng flex, hãy thử điều này:

.container {
  display: flex;
}

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

Đặt cược tốt nhất của bạn là đặt vị trí: tuyệt đối với nút và đặt thành bottom: 0hoặc bạn có thể đặt nút bên ngoài thùng chứa và sử dụng âm transform: translateY(-100%)để đưa nó vào thùng chứa như thế này:

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

Kiểm tra JSFiddle này

Giải pháp align-self: flex-end;không hiệu quả với tôi nhưng giải pháp này đã làm trong trường hợp bạn muốn sử dụng flex:

Kết quả

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

Mã

Lưu ý: Khi "chạy đoạn mã", bạn phải cuộn xuống để xem liên kết ở phía dưới.

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

Không chắc chắn về flexbox nhưng bạn có thể sử dụng thuộc tính vị trí.

thiết lập div position: relative phần tử cha và con có thể là một <p>hoặc <h1>vv .. set position: absolutevà bottom: 0.

Thí dụ:

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

Bút mã ở đây.

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

Bản trình diễn: https://codepen.io/ferittuncer/pen/YzygpWX

Khi đặt màn hình của bạn thành flex , bạn chỉ cần sử dụng thuộc flextính để đánh dấu nội dung nào có thể phát triển và nội dung nào không thể.

Tài sản linh hoạt

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>

Thử cái này

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

Tôi chỉ tìm thấy một giải pháp cho việc này.

Đối với những người không hài lòng với câu trả lời đã cho, có thể thử phương pháp này với 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>