用ChatGPT解决这个技术问题 Extra ChatGPT

使用 flexbox 将元素与底部对齐

html css flexbox

我有一个 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 中有多少文字，我都希望将 .button 始终放在底部，而不会将其从流程中删除。我听说这可以通过 Flexbox 实现，但我无法让它发挥作用。

给它 postition: absolute; bottom 0; ？

@Jonathan 包装器没有固定高度。如果我把它拿出来，它会与文本重叠

@supersize old Q 但你可以给包装器 position:relative - 这很愚蠢，因为我认为它默认是相对的，但你已经设置它以便包含孩子的绝对定位。然后 bottom:0 将适合齐平。

@Jacksonkr div 的默认位置是 static 而不是 relative。

我意识到这是一个旧线程，但乔纳森的建议应该重命名为 position，而不是 postition。

Oriol

您可以使用 auto margins

在通过 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 { 高度：200px;边框：1px 实心；显示：弯曲；弹性方向：列； } h1, h2 { 边距：0； } a { 边距顶部：自动； }

heading 1

heading 2

或多或少一些文字

点我

或者，您可以使 a 之前的元素增长以填充可用空间：

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

.content { 高度：200px;边框：1px 实心；显示：弯曲；弹性方向：列； } h1, h2 { 边距：0； } p { 弹性增长：1； }

heading 1

heading 2

或多或少一些文字

点我

对我来说，这适用于 Chrome，但不适用于 iOS 10.2 上的 Safari。任何人都可以确认吗？

@Oriol我喜欢这种方法，但不是失去边距折叠的副作用，你会怎么做？

flex-grow 为我工作。以下是我的做法html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } #site-content { flex: 1; }

另外请注意，请记住 height: 100% 在您尝试使用 margin-top: auto; 将某些内容推到底部的父元素上

“任何正的可用空间都分配到该维度的自动边距。”像这样的小东西是如此优雅，对我来说，这个解决方案是根据您的回答编写的 2 行代码。谢谢你：）

TylerH

您可以使用 display: flex 将元素定位到底部，但我认为您不想在这种情况下使用 flex，因为它会影响您的所有元素。

要使用 flex 将元素定位到底部，请尝试以下操作：

.container {
  display: flex;
}

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

最好的办法是为按钮设置 position: absolute 并将其设置为 bottom: 0，或者您可以将按钮放在容器外并使用负数 transform: translateY(-100%) 将其带入容器，如下所示：

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

检查此JSFiddle

如果您希望它位于底部，请确保将 flex-direction 设置为 column。

如果我不能提供身高怎么办？

对我有用的只是：```。内容{显示：弹性；弹性方向：列；证明内容：弹性结束； }

某事

```

Liam

<强> 1。样式父元素：style="display:flex; flex-direction:column; flex:1;"

<强> 2。为您想要停留在底部的元素设置样式：style="margin-top: auto;"

3. 完成！哇。那很简单。

例子：

https://i.stack.imgur.com/jSZfe.png

section { /* 仅用于演示，不是必需的 */ display: flex;弹性包装：换行； } div { /* 父元素 */ display: flex;弹性方向：列；弹性：1； } button { /* 目标元素 */ margin-top: auto; } /* DEMO 的装饰风格 */ button { font-size: 20px;背景颜色：深红色；白颜色;边框样式：无；边框半径：3px； } 部分 { 边距：0;填充：0；边框：1px纯黑色；背景颜色：深红色； } div { 字体大小：20px;背景色：卡其色；边框：2px黑色虚线；边距：10px；填充：10px；最小宽度：400px；最小高度：300px； }

Lorem ipsum dolor s at mi imperdiet fringilla vitae id lorem。 Donec ut semper sapien, et ullamcorper metu

Lorem ipsum dolor sit amet

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 坐在 amet feugiat。 Duis sed lectus 在 mi imperdiet fringilla vitae id lorem。 Donec ut semper sapien, et ullamcorper metu

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Morbi at augue ac turpis fringilla egestas。在 mi imperdiet fringilla vitae id lorem 的 Donec quis mctus。 Donec ut semper sapien, et ullamcorper metu

Lorem ipsum dolor sit amet sat amet, consectetur adipiscing elit。 Morbi at augue ac turpis fringilla egestas。在 mi imperdiet fringilla vitae id lorem 的 Donec quis mctus。 Donec ut semper sapien, et ullamcorper

Timo Ernst

align-self: flex-end; 的解决方案对我不起作用，但如果您想使用 flex，这个解决方案可以：

结果

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

代码

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

.content { 显示：弹性； justify-content: 之间的空格；弹性方向：列；高度：300px； } .content .upper { 证明内容：正常； } /* 只是为了显示容器边界 */ .content .upper, .content .bottom, .content .upper > * {border: 1px solid #ccc; }

标题1

标题2

段落文本

链接按钮

content 是它包含 2 个其他容器的列容器，带有 justify-content: space-between;您告诉 flexbox 将容器彼此推开多少（在这种情况下，受内容容器的高度限制）

这不是真正的结果，每个项目之间都会有空格（因此得名）

@Barbz_YHOOL 不，如果您增加容器高度，它会起作用（请参阅更新的示例）

经过大量搜索，这简直太完美了！谢谢你。

稍加修改，这个答案对我来说非常有用，谢谢

Tomas Vancoillie

将显示设置为 flex 时，您可以简单地使用 flex 属性来标记哪些内容可以增长，哪些内容不能增长。

Flex property

div.content { 高度：300px;显示：弯曲；弹性方向：列； } div.up { 弹性：1； } div.down { 弹性：无； }

heading 1

heading 2

一些或多或少的文字

点我

提醒自己：记得在容器中设置高度。我很挣扎，在我的场景中，我所缺少的只是设置高度：100%

Stanley Sathler

如果可以修改 HTML，您可以将所有顶部元素包装在单独的 div 中，然后使用 justify-content: space-between。

像这样的东西：

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

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Sanjay Shr

不确定 flexbox 但您可以使用 position 属性。

设置父元素 div position: relative 和可能是 <p> 或 <h1> 等的子元素。设置 position: absolute 和 bottom: 0。

例子：

索引.html

<div class="parent">
  <p>Child</p>
</div>

样式.css

.parent {
  background: gray;
  width: 10%;
  height: 100px;    
  position: relative;
}
p {
  position: absolute;
  bottom: 0;
}

Code pen here.

position:fixed 不起作用，因为它不会与它所在的容器相关。也许您的意思是 position:absolute？

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。

更新了答案。

Alok Jain

<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 属性，Button 将占据底部的整个空白区域，使整个区域可点击。我会建议将按钮包装在 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

aj go

我刚刚找到了解决方案。

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

mohxn ayaz

尝试这个

.content { 显示：弹性；弹性方向：列；高度：250px；宽度：200px；边框：实心； word-wrap：断词； } .content h1 , .content h2 { margin-bottom: 0px; } .content p { 弹性：1； }