Align 对齐排列

使用说明

框架定义了13个对齐方式,其中ax-align-center-center=ax-align-origin, 说明如下:

  • ax-align-left 水平居左对齐
  • ax-align-right 水平居右对齐
  • ax-align-center 水平居中对齐
  • ax-align-top-left 顶部水平居左
  • ax-align-top-center 顶部水平居中
  • ax-align-top-right 顶部水平居右
  • ax-align-bottom-left 底部水平居左
  • ax-align-bottom-center 底部水平居中
  • ax-align-bottom-right 底部水平居右
  • ax-align-left-center 左侧垂直居中
  • ax-align-right-center 右侧垂直居中
  • ax-align-center-center 水平和垂直居中对齐
  • ax-align-origin 水平和垂直居中对齐

使用方法如下:

                            <div class="ax-align-left">内容</div>
                            <div class="ax-align-right">内容</div>
                            <div class="ax-align-center">内容</div>

                            <div class="ax-align-top-left">内容</div>
                            <div class="ax-align-top-center">内容</div>
                            <div class="ax-align-top-right">内容</div>

                            <div class="ax-align-bottom-left">内容</div>
                            <div class="ax-align-bottom-center">内容</div>
                            <div class="ax-align-bottom-right">内容</div>

                            <div class="ax-align-left-center">内容</div>
                            <div class="ax-align-right-center">内容</div>
                            <div class="ax-align-center-center">内容</div>
                            <div class="ax-align-origin">内容</div>
                        

如果定了块flex布局或行内inline-flex布局,可对横向justify-content和纵向align-items进行对齐。以下列出了所有对齐方式。

常用的属性值。

属性 备注
display inline-flex和flex 布局方式
justify-content flex-start、center、flex-end 水平排列方向
align-items flex-start、center、flex-end 垂直排列方向