代码之家 › 专栏 › 技术社区 › 3gwebtrain

底部对齐在flex box中不起作用

flexbox css3 css html

3gwebtrain · 技术社区 · 6 年前

我试图在底部对齐页脚,在顶部留下空间。但不起作用。有人帮我知道正确的方法吗?

.parent {
  border: 1px solid red;
  display: flex;
}

.child {
  border: 1px solid green;
  min-height: 100px;
  flex: 1;
  align-items:bottom;
}
.footer{
	background:#808080;
}

<div class="parent">
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer-will be in bottom!!</div>
  </div>
</div>

4 回复 | 直到 6 年前

Scopestyle 6 年前

首先,要使项目底部对齐,正确的方法是 align-items: flex-end; 我还宣布 display:flex; 在 .child ,并给它一个宽度。

.parent {
  border: 1px solid red;
  display: flex;
}

.child {
  border: 1px solid green;
  min-height: 100px;
  display: flex;
  width: 33.333%;
  align-items: flex-end;
}
.footer{
  background:#808080;
  width: 100%;
}

<div class="parent">
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer-will be in bottom!!</div>
  </div>
</div>

We Are All Monica 6 年前

在这个例子中 .child display: flex 和 .footer 需要 align-items: bottom .

为什么?这实际上是多个嵌套的flex布局。

Abin Thaha 6 年前

.parent {
  border: 1px solid red;
  display: flex;
}

.child {
  border: 1px solid green;
  min-height: 100px;
  flex: 1;
  display: inline-flex;
  align-items: flex-end;
  flex-direction: row;
}
.footer {
  display: inline-block;
  width: 100%;
	background:#808080;
}

<div class="parent">
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer-will be in bottom!!</div>
  </div>
</div>

但以一种更优化的方式。我再给你看一个例子:

.parent {
  border: 1px solid red;
  display: flex;
}

.child {
  flex: 1;
  border: 1px solid green;
  min-height: 100px;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
.footer{
	background:#808080;
}

<div class="parent">
  <div class="child">
    <div class="content">Content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="content">Content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="content">Content</div>
    <div class="footer">Footer-will be in bottom!!</div>
  </div>
</div>

如果不想更改HTML标记并使用与问题中相同的标记,可以使用第一种解决方案。否则,第二个会更好。

George 6 年前

从中删除线条高度 .child .parent .

更新

.parent {
  border: 1px solid red;
  display: flex;
  align-items: flex-end;
  height: 100px;
}

.child {
  border: 1px solid green;
  flex: 1;
  align-items:bottom;
}
.footer{
	background:#808080;
}

<div class="parent">
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer</div>
  </div>
  <div class="child">
    <div class="footer">Footer-will be in bottom!!</div>
  </div>
</div>