html 自动固定在底部,html – 将弹性项目固定到容器的底部

由于您正在使用行方向Flex容器,因此无法将最后一项固定到底部.你正在处理横轴空间分布,这意味着柔性线被拉伸或打包,并且没有办法将两个项目固定到顶部和一个到底部(除非你超越flexBox并使用绝对定位).

这是一个完整的解释.

使布局工作的一种简单有效的方法是列方向容器,在最后一项上具有弹性自动边距.通过在主轴上对齐项目,您可以将各个项目分开.

以下是flex auto margin的解释：

/* FLEXBox RELATED */

.grid {

display: flex;

justify-content: space-between;

flex-flow: row wrap;

}

.block {

flex: 0 24%;

display: flex;

}

.container {

display: flex;

flex-direction: column; /* new */

/* flex-flow: row wrap; */

/* align-items: flex-start; */

}

.title {

/* flex: 0 100%; */

}

.desc {

/* flex: 0 100%; */

}

.button {

margin-top: auto; /* new */

/* flex: 0 100%; */

/* align-self: flex-end; */

}

/* NO FLEXBox RELATED */

.block {

background-color: #ccc;

}

.title {

font-size: 2rem;

font-weight: bold;

padding: 0.5rem;

text-align: center;

}

.desc {

background-color: grey;

padding: 0.5rem;

}

.button {

padding: 0.5rem;

color: blue;

text-align: center;

font-weight: bold;

}

Title 1

Description Description Description Description Description Description Description Description Description Description

Button

Title 2

Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description

Button

Title 3

Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description

Button

Title 4

Description Description Description Description Description Description Description Description Description Description

Button