html行内标签文本右对齐属性,如何使用display：flex在HTML元素中使文本右对齐？...

56 阅读 0 评论 37 点赞

我是靠谱客的博主土豪豌豆，最近开发中收集的这篇文章主要介绍html行内标签文本右对齐属性,如何使用display：flex在HTML元素中使文本右对齐？...，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

你快到了.您只需要添加justify-content属性.

在CSS中添加一行代码：

.inner1 {

display: flex;

width: 5em;

/* text-align: right; REMOVE; not necessary */

justify-content: flex-end; /* NEW */

}

这是一个稍微增强的演示,使该功能更加引人注目：

justify-content

The justify-content property aligns flex items along the main axis

of the current line of the flex container.

flex-end

Flex items are packed toward the end of the line.

UPDATE

从评论部分：

This is working for me. The only confusion for me is that it says that

justify-content aligns flex-items. Since when is the content (text)

itself considered a flex item? Moreover, is the .inner1 div considered

a flex item, and will the entire div be moved around along the axis

too? – @mareoraft

Flex容器中的内联内容包装在anonymous flex item中,该内容能够从父级继承属性.但是,匿名项目(如anonymous block and anonymous inline boxes)是不可选择的,因此不可设置.因此,如果要将样式应用于文本,请考虑将其包装在< span>,< div>中.或其他元素.

类.inner1的div作为flex容器(.outer)的子代,是一个flex项.所有弹性项属性均适用. .inner1也兼作(嵌套)flex容器,因此所有flex容器属性也适用.