包名称

公共布局css

包内容说明

• 这个包主要提供 css 常用的flex布局，float布局, position布局,文本样式，常用的盒模型【内边距,外边距】大小 避免业务代码中重复使用这些布局
  • 盒子模型的内外边距常用大小：范围为100px 以内的 内外边距，例如

      <div class='mt-5 ml-10 mr-10 pt-15'>
           这段布局含义为： 这个盒子距离 上一个兄弟盒子，外边上边距为5px,右外边距为10px, 左外边距为10px, 内上边居为15px ;  边距的范围为100px 以内； 5px为一个递增或递减大小
      </div>

• 开发过程中，不清楚有哪些可以使用的 class 公共样式时， 可以直接参考 layout-xiaoxi模块内中lib 目录的index.css 文件 css /****案例****/ .flex { display: flex; } .text-center { text-align: center; }
• 实际生产中， 引用的是打包好的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