text-align、align-items 和 justify-content

当我们使用 CSS 来控制布局时，我们可以采用一些通用的属性来控制文本、元素等在页面上的位置和对齐方式。下面是关于 text-align、align-items 和 justify-content 的通用总结

1. text-align：

   • 适用范围： 适用于文本元素，如 <p>、<div> 等。
   • 作用： 控制文本内容在其容器中的水平对齐方式。
   • 通用表达方式：

     text-align: left; /* 左对齐 */
     text-align: right; /* 右对齐 */
     text-align: center; /* 居中对齐 */
     text-align: justify; /* 两端对齐 */
     

 2.align-items：

• 适用范围： 适用于弹性容器的项目，在 Flexbox 布局中使用。
• 作用： 控制项目在交叉轴（垂直方向）上的对齐方式。
• 通用表达方式：

  align-items: flex-start; /* 顶部对齐 */
  align-items: flex-end; /* 底部对齐 */
  align-items: center; /* 居中对齐 */
  align-items: stretch; /* 拉伸填充 */
  

 3.justify-content：

• 适用范围： 适用于弹性容器，在 Flexbox 布局中使用。
• 作用： 控制项目在主轴（水平方向）上的对齐方式。
• 通用表达方式：

  justify-content: flex-start; /* 起始对齐 */
  justify-content: flex-end; /* 结束对齐 */
  justify-content: center; /* 居中对齐 */
  justify-content: space-between; /* 两端对齐 */
  justify-content: space-around; /* 均匀分布 */
  justify-content: space-evenly; /* 均匀分布，包括首尾 */
  

这些通用的表达方式可以用于在不同的布局场景下，通过 CSS 控制文本、元素在页面上的对齐和排列方式，使得页面布局更加灵活和易于控制。