将弹性项目的内容与底部对齐

Question

非常简单，一个容器必须让它的子项拉伸（原样），但子div的内容必须与底部对齐，与flex-end相同，但保持高度。

关于如何做到的任何想法？

看看这支笔： http://codepen.io/anon/pen/NAjRvo

.container {
  height: 100px;
  background: BurlyWood;
  display: flex;
  align-items: stretch;
}

.item{
  flex:1;
  margin: 4px;
  background: Crimson;
}

.item p {
  margin: 0;
  text-align: center;
}
  

<div class="container">
  <div class="item">
    <p>lorem</p>
  </div>
  
  <div class="item">
    <p>ipsum</p>
  </div>
  
  <div class="item">
    <p>dolor</p>
  </div>
</div>

Answer 1

让儿童成为弹性容器......然后相应地对齐

int num = 0;
public static void main(String[] args)
{
     task1();
     task2();
}

public static void task1()
{
    int fetchedValue;
    rootRef.addListenerForSingleValueEvent(new ValueEventListener() {

        public void onDataChange(DataSnapshot snapshot) {
            fetchedValue = Integer.parseInt(snapshot.getValue().toString());
            num = num + fetchedValue ;
        }

        public void onCancelled(FirebaseError arg0) {
            System.out.println("cancelled");
        }
    });
    num = num + fetchedValue;

}

public static void task2()
{
    System.out.println("Updated number : "+num);
}

.container {
  height: 100px;
  background: BurlyWood;
  display: flex;
}

.item{
  flex:1;
  margin: 4px;
  background: Crimson;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.item p {
  margin: 0;
  text-align: center;
}
  

或类似于flex-columns

<div class="container">
  <div class="item">
    <p>lorem</p>
  </div>
  
  <div class="item">
    <p>ipsum</p>
  </div>
  
  <div class="item">
    <p>dolor</p>
  </div>
</div>

.container {
  height: 100px;
  background: BurlyWood;
  display: flex;
}

.item{
  flex:1;
  margin: 4px;
  background: Crimson;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.item p {
  margin: 0;
  text-align: center;
}
  

Answer 2

除了已经提到的关键字属性，您还可以使用flex auto margins：

.container {
  height: 100px;
  background: BurlyWood;
  display: flex;
  align-items: stretch;
}
.item {
  flex: 1;
  margin: 4px;
  background: Crimson;
  justify-content: center;
  text-align: center;
  display: flex;             /* NEW */
}
.item p {
  margin: auto 0 0 0;        /* ADJUSTED */
}

<div class="container">
  <div class="item">
    <p>lorem</p>
  </div>
  <div class="item">
    <p>ipsum</p>
  </div>
  <div class="item">
    <p>dolor</p>
  </div>
</div>

Answer 3

你可以使用绝对位置。

为了使文字居中，您需要left和right:0。

＆＃13;

＆＃13;

.container {
  height: 100px;
  background: BurlyWood;
  display: flex;
  align-items: stretch;
}

.item{
  flex:1;
  margin: 4px;
  background: Crimson;
  position:relative;
}

.item p {
  margin: 0;
  text-align: center;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

＆＃13;

<div class="container">
  <div class="item">
    <p>lorem</p>
  </div>
  
  <div class="item">
    <p>ipsum</p>
  </div>
  
  <div class="item">
    <p>dolor</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

你也可以在一个元素上使用grow，所以另一个元素只占用它需要的空间。这不是我眼中真正干净的解决方案，但它确实有效：

＆＃13;

＆＃13;

.container {
  height: 100px;
  background: BurlyWood;
  display: flex;
  align-items: stretch;
}

.item{
  flex:1;
  margin: 4px;
  background: Crimson;
  display:flex;
  flex-direction: column;
}

.item div {
  flex:1;
}

.item p {
  margin: 0;
  text-align: center;
}

＆＃13;

<div class="container">
  <div class="item">
    <div>&nbsp;</div>
    <p>lorem</p>
  </div>
  
  <div class="item">
    <div>&nbsp;</div>
    <p>ipsum</p>
  </div>
  
  <div class="item">
    <div>&nbsp;</div>
    <p>dolor</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;