1. 样式父元素:Style ="display:flex; "flex-direction:列;flex: 1;

2. 为你想留在底部的元素设置样式:Style ="margin-top: auto;"

3.完成了!哇。这很简单。

例子:

section { /* ONLY FOR DEMO, NOT NECESSARY */ display: flex; flex-wrap: wrap; } div { /* PARENT ELEMENT */ display: flex; flex-direction: column; flex: 1; } button { /* TARGET ELEMENT */ margin-top: auto; } /* DECORATIVE STYLES FOR DEMO */ button { font-size: 20px; background-color: crimson; color: white; border-style: none; border-radius: 3px; } section { margin: 0; padding: 0; border: 1px solid black; background-color: crimson; } div { font-size: 20px; background-color: khaki; border: 2px dashed black; margin: 10px; padding: 10px; min-width: 400px; min-height: 300px; } <section> <div> <span>Lorem ipsum dolor s at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper metu</span> <button>I</button> </div> <div> <span>Lorem ipsum dolor sit amet</span ><button> stay </button> </div> <div> <span >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at augue ac turpis fringilla egestas. quis mi diam. Quisque faucibus, massa non finibus iaculis, arcu nulla auctor enim, quis accumsan dolor odio quis turpis. Duis convallis pulvinar justo sit amet feugiat. Duis sed lectus at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper metu</span > <button> at </button> </div> <div> <span>Lorem ipsum dolor sit amet</span ><button> bottom </button> </div> <div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at augue ac turpis fringilla egestas. Donec quis mctus at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper metu</span> <button> always </button> </div> <div> <span>Lorem ipsum dolor sit amet sit amet, consectetur adipiscing elit. Morbi at augue ac turpis fringilla egestas. Donec quis mctus at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper</span ><button> all ways </button> </div> </section>

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

CSS注意事项:

根据需要更改.content的高度 由于flex:1属性，按钮将占据底部的整个空白区域，使整个区域可单击。我建议将按钮包装在div或span中

CSS

.content {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.button {
    display: flex;
    flex: 1;
    align-items: flex-end;
}

https://codepen.io/alokjain_lucky/pen/MWooJGw

我刚找到了解决办法。

对于那些对给出的答案不满意的人，可以使用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>

不确定是否适用于flexbox，但你可以使用position属性。

设置父div位置为相对 子元素可能是<p>或<h1>等。设置位置:绝对和底部:0。

例子:

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

这里是密码笔。

1. 样式父元素:Style ="display:flex; "flex-direction:列;flex: 1;

2. 为你想留在底部的元素设置样式:Style ="margin-top: auto;"

3.完成了!哇。这很简单。

例子:

section { /* ONLY FOR DEMO, NOT NECESSARY */ display: flex; flex-wrap: wrap; } div { /* PARENT ELEMENT */ display: flex; flex-direction: column; flex: 1; } button { /* TARGET ELEMENT */ margin-top: auto; } /* DECORATIVE STYLES FOR DEMO */ button { font-size: 20px; background-color: crimson; color: white; border-style: none; border-radius: 3px; } section { margin: 0; padding: 0; border: 1px solid black; background-color: crimson; } div { font-size: 20px; background-color: khaki; border: 2px dashed black; margin: 10px; padding: 10px; min-width: 400px; min-height: 300px; } <section> <div> <span>Lorem ipsum dolor s at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper metu</span> <button>I</button> </div> <div> <span>Lorem ipsum dolor sit amet</span ><button> stay </button> </div> <div> <span >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at augue ac turpis fringilla egestas. quis mi diam. Quisque faucibus, massa non finibus iaculis, arcu nulla auctor enim, quis accumsan dolor odio quis turpis. Duis convallis pulvinar justo sit amet feugiat. Duis sed lectus at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper metu</span > <button> at </button> </div> <div> <span>Lorem ipsum dolor sit amet</span ><button> bottom </button> </div> <div> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at augue ac turpis fringilla egestas. Donec quis mctus at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper metu</span> <button> always </button> </div> <div> <span>Lorem ipsum dolor sit amet sit amet, consectetur adipiscing elit. Morbi at augue ac turpis fringilla egestas. Donec quis mctus at mi imperdiet fringilla vitae id lorem. Donec ut semper sapien, et ullamcorper</span ><button> all ways </button> </div> </section>

你可以使用汽车利润

在通过justify-content和align-self进行对齐之前， 任何正的自由空间都被分配到汽车边距中 维度。

所以你可以使用其中一个(或两个):

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

.content { 身高:200 px; 边框:1px实体; 显示:flex; flex-direction:列; ｝ H1, h2 { 保证金:0; ｝ 一个{ margin-top:汽车; ｝ < div class = "内容" > <标题>标题1 < / h1 > < h2 >标题2 < / h2 > <p>一些文本或多或少</p> <a href="/" class="button">点击我</a> < / div >

或者，你也可以让a之前的元素填充可用空间:

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

.content { 身高:200 px; 边框:1px实体; 显示:flex; flex-direction:列; ｝ H1, h2 { 保证金:0; ｝ p { flex-grow: 1; ｝ < div class = "内容" > <标题>标题1 < / h1 > < h2 >标题2 < / h2 > <p>一些文本或多或少</p> <a href="/" class="button">点击我</a> < / div >