# 布局样式

提示

支持全端兼容,迅速简便地创建全端兼容布局。
如果您是第一次使用unify ui,那么布局样式这篇文档就尤为重要,是unify ui兼容全端的核心样式。
建议您先将容器布局、水平布局、垂直布局、定位布局熟悉熟悉,可配合辅助布局文档进行一起使用,构建页面将更加便捷。

# 布局样式

行布局 class 列布局 class
超出不换行 row-nowrap 从上到下排布 column-column
超出不换行(反向) row-reverse-nowrap 从上到下排布(反向) column-reverse
超出换行 row-wrap 水平对齐(靠左) column-start
超出换行(反向) row-reverse-wrap 水平对齐(居中) column-center
水平对齐(靠左) row-start 水平对齐(靠右) column-end
水平对齐(居中) row-center 垂直对齐(靠顶部) column-top
水平对齐(靠右) row-end 垂直对齐(中间) column-middle
垂直对齐(靠顶部) row-top 垂直对齐(靠底部) column-bottom
垂直对齐(中间) row-middle 垂直居中 column-middle-center
垂直对齐(靠底部) row-bottom
水平对齐(两端) row-space-between
水平对齐(两端留空) row-space-around
垂直居中 row-middle-center

# 定位样式

定位 class 描述
绝对定位 position-absolute
窗口定位 position-fixed 保证元素在页面窗口中的对应位置显示
元素固定 position-sticky 指的是仅当元素滚动到页面之外时,元素会固定在页面窗口的顶部,需配合样式top使用
左上角 position-absolute-lt
左下角 position-absolute-lb
右上角 position-absolute-rt
右下角 position-absolute-rb

# 其他样式

class 描述
flex-{1~12} flex布局中占位比例,最多12份
ellipsis-{1~12} 多少行截至显示省略号,最多12行
text-center 文本居中
text-left 文本靠左
text-right 文本靠右
text-bold 文本加粗
text-decoration 文本横线