Align排列对齐

2024-06-19 00:10:59首发，2个月前更新

对齐排列分两大列，一类是行内元素的左中右排列；二类是弹性布局的子元素对齐；通过_a[-*]独立设置父层的对齐排列方式。

Display呈现

标签的display属性通常使用[inline-]flex、[inline-]block、[inline-]grid和inline，另外可能会用到的flow-root和none。

需要特别说明下flow-root属性，当我们对block块元素的子元素使用float[:left/right]属性时，会导致父元素塌陷，而对父元素使用flow-root属性可以解决这个问题，该属性是block的加强属性。

本框架已经对常用display属性做了样式设定：

• _d-none => display:none;
• _d-flow => display:flow-root;
• _d-inline => display:inline;
• _d-grid => display:grid;
• _d-block => display:block;
• _d-flex => display:flex;
• _d-ingrid => display:inline-grid;
• _d-inblock => display:inline-block;
• _d-inflex => display:inline-flex;

---

Align排列

文本或子元素有两种排列方式，一是行内文本或子元素排列；二是弹性布局子元素的排列。

我们对元素使用align=left/center/right样式，其中的文本或行内元素会自动排序；但是对于flex布局的子元素的排列方式不会发生改变，因为flex布局中的子元素需要通过align-items和justify-content属性设置才可进行排序。

---

行内排序

通过_a-l、_a-c和_a-r三个样式类可执行行内排序。a=align缩写，l=left缩写，c=center缩写，r=right缩写。

flex排序

对flex布局的子元素排序，需要先理解排序的原理，flex布局排序主要基于align-items和justify-content两个属性，他们的可用值如下：

属性	可选值	默认值	说明
align-items	flex-start、center、flex-end	flex-start	垂直排列方式，start排在上方，center排在中间，end排在下方
justify-content	flex-start、center、flex-end	flex-start	水平排列方式，start排在左侧，center排在中间，end排在右侧

为此我们内建了表示弹性布局排序的样式类。

• _a-lt:左上角（left+top）
• _a-lc:左中侧（left+center）
• _a-lb:左下侧（left+bottom）
• _a-ct:中上侧（center+top）
• _a-cc:绝对中间（center+center）
• _a-cb:中下侧（center+bottom）
• _a-rt:右上侧（right+top）
• _a-rc:右中侧（right+center）
• _a-rb:右下侧（right+bottom）