[分享]css元素沿底对齐怎么用

CSS 元素沿底对齐是一种常见的布局技巧，允许我们将元素垂直对齐到容器的底部。在实际应用中，我们可以使用 Flexbox 或 Grid 进行底部对齐，也可以使用绝对定位等方式来实现。使用 Flexbo...

CSS 元素沿底对齐是一种常见的布局技巧，允许我们将元素垂直对齐到容器的底部。在实际应用中，我们可以使用 Flexbox 或 Grid 进行底部对齐，也可以使用绝对定位等方式来实现。
使用 Flexbox 进行底部对齐：
1. 设置容器的 display 为 flex

<br> <br>
      .container {<br>
        display: flex;<br>
        flex-direction: column;<br>
        justify-content: space-between;<br>
        height: 400px;<br>
      }<br> 

2. 设置元素的 margin-top 为 auto

<br> <br>
      .box {<br>
        margin-top: auto;<br>
      }<br> 

这样，元素将被推到容器底部，并且如果容器高度改变，元素仍然会在底部对齐。
使用 Grid 进行底部对齐：
1. 设置容器的 display 为 grid

<br> <br>
      .container {<br>
        display: grid;<br>
        grid-template-rows: repeat(2, 1fr);<br>
        height: 400px;<br>
      }<br> 

2. 设置元素的 grid-row

<br> <br>
      .box {<br>
        grid-row: 2;<br>
      }<br> 

这样，元素将被放置在第二行，即容器的底部。
使用绝对定位进行底部对齐：
1. 设置容器的 position 为 relative

<br> <br>
      .container {<br>
        position: relative;<br>
        height: 400px;<br>
      }<br> 

2. 设置元素的 position 为 absolute，bottom 为 0

<br> <br>
      .box {<br>
        position: absolute;<br>
        bottom: 0;<br>
      }<br> 

这样，元素将被定位在容器的底部。需要注意的是，如果容器高度改变，元素位置仍然会保持在底部。
综上所述，使用 Flexbox、Grid 或绝对定位都可以实现 CSS 元素沿底对齐。需要根据实际场景选择最适合的方式。