文字项目与flex-end不对齐

Question

根据flexbox documentation，父级上的align-items: flex-end应将所有子级都对准容器的底部。

我做了一个小样本证明了相反的情况。为了使div正确对齐，我缺少什么？

.container {
    display: flex;
    flex-direction: row;    
    align-items: flex-end;    
}

.item1 {font-size: 80px;}
.item2 {font-size: 14px;}
.item3 {font-size: 45px;}

<div class="container">
    <div class="item1">Item 1</div>
    <div class="item2">Item 2</div>
    <div class="item3">Item 3</div>
</div>

Answer 1

您正在寻找flexbox的align-items: baseline

.container {
    display: flex;
    flex-direction: row;    
    align-items: baseline; 
     
    border:1px solid red;
}

.item1 {font-size: 80px;}
.item2 {font-size: 14px;}
.item3 {font-size: 45px;}

.container> div {border:1px solid green; }

<div class="container">
    <div class="item1">Item 1</div>
    <div class="item2">Item 2</div>
    <div class="item3">Item 3</div>
</div>

记录在here上的弹性包装盒布局模块（“ flexbox”）

来自www.w3.org文档的有用插图：

Answer 2

  

根据flexbox文档，父级上的align-items: flex-end应将所有子级与容器的底部对齐。

按照文档中的说明，它们与横轴的末端对齐（在这种情况下为底部）。

.container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  border: 1px dashed black;
}

.item1 { font-size: 80px; }
.item2 { font-size: 14px; }
.item3 { font-size: 45px; }

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

  

为了使div正确对齐，我缺少什么？

好吧，如果您真正想要的是文本行彼此对齐（即基线对齐），那么您应该使用another answer to this post中指定的align-items: baseline，并在此处进行详细说明：< / p>

• What's the difference between flex-start and baseline?

但是，如果您实际上希望文本与flex容器的底部对齐，则需要考虑每种字体大小的line-height。

line-height属性设置行框的最小高度，其中存在行内元素（例如文本）。默认情况下，较大的字体大小具有较大的行高。

要将文本对齐到容器的底部，尤其是在没有定义高度的容器中（这意味着容器的内容将设置高度），那么您需要使用line-height值才能实现目标。

.container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  border: 1px dashed black;
  /* height: 100px; */ /* uncomment for additional demo */
}


.item1 {font-size: 80px; line-height: 55px; }
.item2 {font-size: 14px; line-height: 11px; }
.item3 {font-size: 45px; line-height: 31px; }

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>