1.0.2 • Published 2 years ago
layout-xiaoxi v1.0.2
包名称
公共布局css
包内容说明
- 这个包主要提供 css 常用的flex布局,float布局, position布局,文本样式,常用的盒模型【内边距,外边距】大小 避免业务代码中重复使用这些布局
- 盒子模型的内外边距常用大小:范围为100px 以内的 内外边距,例如
<div class='mt-5 ml-10 mr-10 pt-15'> 这段布局含义为: 这个盒子距离 上一个兄弟盒子,外边上边距为5px,右外边距为10px, 左外边距为10px, 内上边居为15px ; 边距的范围为100px 以内; 5px为一个递增或递减大小 </div>
- 盒子模型的内外边距常用大小:范围为100px 以内的 内外边距,例如
- 开发过程中,不清楚有哪些可以使用的 class 公共样式时, 可以直接参考 layout-xiaoxi模块内中lib 目录的index.css 文件
.flex { display: flex; } .text-center { text-align: center; }```css /****案例****/
```
实际生产中, 引用的是打包好的index.min.css 文件
模块的源码在src 目录中
打包源码
npm run build
引用方式
模块化引用
import "layout-xiaoxi"
多页应用引入
实际使用案例
<!-- 使用案例-->
<div class='flex justify-content-end mt-10'>
我是布局容器
</div>
参考文档
.flex
.inline-flex
.flex-row
.flex-column
.flex-row-reverse
.flex-column-reverse
.flex-wrap
.flex-nowrap
.flex-wrap-reverse
.flex-fill
.flex-grow-0
.flex-grow-1
.flex-shrink-0
.flex-shrink-1
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-content-start
.align-content-end
.align-content-center
.align-content-between
.align-content-around
.align-content-stretch
.align-self-auto
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.text-left
.text-right
.text-center
.text-wrap
.text-nowrap
.font-12
.font-14
.font-16
.font-18
.font-20
.float-left
.float-right
.float-none
/*清除浮动*/
.clearfix
.position-r
.position-a
.position-s
.position-f
.mt-0 ~ .mt-100
.mb-0 ~ .mb-100
.ml-0 ~ .ml-100
.mr-0 ~ .mr-100
.pt-0 ~ .pt-100
.pb-0 ~ .pb-100
.pr-0 ~ .pr-100
.pl-0 ~ .pl-100
.pd-0 ~ .pd-100
.margin-auto
.padding-auto
.hover
.display-block
.diplay-inline