我和一些孩子有一个div:

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

我想要下面的布局:

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

不管p中有多少文本,我希望始终将.按钮粘在底部,而不将其从流中取出。我听说这可以用Flexbox实现,但我不能让它工作。


当前回答

在将显示设置为flex时,只需使用flex属性标记哪些内容可以增长,哪些内容不能增长。

Flex财产

div.content { 身高:300 px; 显示:flex; flex-direction:列; } div.up { flex: 1; } div.down { flex:没有; } < div class = "内容" > < div class = " " > <标题>标题1 < / h1 > < h2 >标题2 < / h2 > <p>一些或多或少的文本</p> < / div > < div class = "”> <a href="/" class="button">点击我</a> < / div > < / div >

其他回答

align-self的解决方案:弯曲端;对我来说没用,但如果你想使用flex,这个是有用的:

结果

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

Code

注意:当“运行代码片段”时,你必须向下滚动才能看到底部的链接。

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

在将显示设置为flex时,只需使用flex属性标记哪些内容可以增长,哪些内容不能增长。

Flex财产

div.content { 身高:300 px; 显示:flex; flex-direction:列; } div.up { flex: 1; } div.down { flex:没有; } < div class = "内容" > < div class = " " > <标题>标题1 < / h1 > < h2 >标题2 < / h2 > <p>一些或多或少的文本</p> < / div > < div class = "”> <a href="/" class="button">点击我</a> < / div > < / div >

<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

你可以使用汽车利润

在通过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 >

我刚找到了解决办法。

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