文本项与 flex-end 不对齐答案

【问题标题】：Text items do not align with flex-end文本项与 flex-end 不对齐
【发布时间】：2019-05-29 14:52:10
【问题描述】：

根据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>

【问题讨论】：

他们排成一列。为每个添加背景颜色，您会看到。字体大小的差异会从底部创建更多空间，字体越大。
@ecg8 那么如何解决字体大小问题呢？

标签： html css flexbox

【解决方案1】：

根据 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 正确对齐，我缺少什么？

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

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

但是如果你真的想让文本对齐到弹性容器的底部，那么你需要考虑每个字体大小的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>

【讨论】：

【解决方案2】：

您正在寻找 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>

Flexbox 布局模块（“flexbox”）记录在 here

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

【讨论】：