3

我有一个包含两个子弹性项目的弹性框标题。这些弹性项目反过来有自己的孩子。

有没有办法覆盖弹性项目的垂直对齐方式，以便它们的子项在底部对齐？

div.flexbox {
  display: flex;
  align-items: stretch; /* cross axis */
  justify-content: space-between; /* main axis */
  flex-flow: row wrap;
  border-bottom: 1px solid #ddd;
  min-height: 100px;
}

.item-1, .item-2 {
  padding: 10px;
}

.item-1 {
  width: 30%;
  position: relative;
}

.item-2 {
  width: 60%;
}
<div class="flexbox">
  <div class="item-1">
    <span>I want to be aligned at the bottom of item-1</span>
  </div>

  <div class="item-2">
    <span>I want to be aligned at the bottom of item-2</span>
  </div>
</div>

4

2 回答 2

2

您可以使用 webkit-align-items 到 m

-webkit-align-items:flex-end;

http://jsfiddle.net/5N2km/1/

于 2012-12-23T16:35:54.280 回答
1

您可以align-items将容器上的值从切换stretch到flex-end。也许这就是你要找的。

div.flexbox {
  display: flex;
  align-items: flex-end;  /* adjusted */
  justify-content: space-between;
  flex-flow: row wrap;
  border: 1px solid black;
  min-height: 100px;
  padding: 5px;
}

.item-1, .item-2 {
  padding: 10px;
  border: 1px dashed red;
}

.item-1 {
  width: 30%;
  position: relative;
}

.item-2 {
  width: 60%;
}
<div class="flexbox">
  <div class="item-1">
    <span>I want to be aligned at the bottom of item-1</span>
  </div>

  <div class="item-2">
    <span>I want to be aligned at the bottom of item-2</span>
  </div>
</div>

但是由于您的实际问题是：

有没有办法覆盖弹性项目的垂直对齐方式，使其子项在底部对齐？

...那么您应该将 flex 项放入嵌套的 flex 容器中，并将内容与 flex 属性垂直对齐：

div.flexbox {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-flow: row wrap;
  border: 1px solid black;
  min-height: 100px;
  padding: 5px;
}

.item-1, .item-2 {
  display: flex;          /* new */
  align-items: flex-end;  /* new */
  padding: 10px;
  border: 1px dashed red;
}

.item-1 {
  width: 30%;
  position: relative;
}

.item-2 {
  width: 60%;
}
<div class="flexbox">
  <div class="item-1">
    <span>I want to be aligned at the bottom of item-1</span>
  </div>

  <div class="item-2">
    <span>I want to be aligned at the bottom of item-2</span>
  </div>
</div>

于 2017-04-22T19:11:46.013 回答