1、划分layui区域
- layui-container：layui框架的容器，作用类似于flex布局的容器。
<div class="layui-container">
// 在网页上划分一个区域，该区域专门使用layui的布局模块
</div>
在layui框架中，任何行上方不允许存在浮动元素。
1.1、Layui的列元素
先使用class="layui-container"在网页上划分出一个区域，该区域专门使用layui的布局模块。
Layui框架中采用class="layui-row"去在layui的布局模块中新建一个行，然后使用layui-col这样的预设类来定义一组列(column)，并且放在行内。
layui-col的后面还需要跟上两组参数，具体格式如下：
-
layui-col-媒体类型+列所占的宽度比例：
媒体类型：分别是xs(超小屏幕，如手机)、sm(小屏幕，如平板)、md(桌面中等屏幕)、lg(桌面大型屏幕)，以呈现更加灵活的布局。
列所占的宽度比例：代表的是该列所占用的12等分，可选值为1~12，如果多个列的“等分数值”总和等于12，则刚好满行排列，如果大于12，多余的将自动另起一行。
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md9">
12份中占9份
</div>
<div class="layui-col-md3">
12份中占3份
</div>
</div>
</div>
1.2、定义layui区域不同设备的列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用 layui</title>
<link rel="stylesheet" href="css/layui.css">
<style type="text/css">
.layui-container {
height: 100vh;
border: 1px solid #ccc;
}
.layui-row > div {
height: 50px;
line-height: 50px;
background: slateblue;
}
</style>
</head>
<body>
<script src="js/layui.js"></script>
<div class="layui-container">
<div class="layui-row">
<!--中等桌面屏幕一行排列 | 平板屏幕两行排列-->
<div class="layui-col-md3 layui-col-sm6">数据内容</div>
<div class="layui-col-md3 layui-col-sm6">数据内容</div>
<div class="layui-col-md3 layui-col-sm6">数据内容</div>
<div class="layui-col-md3 layui-col-sm6">数据内容</div>
</div>
</div>
</body>
</html>
大于等于992px时
中等桌面屏幕.png
小于992px
平板屏幕.png
1.3、layui容器区域内元素的显示类型的变化
元素的宽度，列数，显示类型等变化都是基于响应式网站设计理念而来，之所以UI框架加入这一特性，目的是为了能够使UI框架的适用范围更大。
- 显示为块元素：
layui-show-md-block
- 显示为行内元素：
layui-show-md-inline
- 显示为行内块元素：
layui-show-md-inline-block
- 元素消失：
layui-hide-md
1.4、layui-col-space列间距：容器区域内多列内容之间的间距设置
格式：
layui-col-space$ $为数字，代表每一列内容的间距，从本质上讲：这个间距是加在了每一个layui-col的左右内边距上的像素。
<div class="layui-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<div class='dem'>内容</div>
</div>
<div class="layui-col-md4">
<div class='dem'>内容</div>
</div>
<div class="layui-col-md4">
<div class='dem'>内容</div>
</div>
</div>
</div>
1.4、layui-col-屏幕类型-offset$：列偏移，Layui容器区域内的某一列向右偏移列数
格式：
ayui-col-屏幕类型-offset$$为数字，代表该列内容距离左边内容的偏移的列数
如果列宽+列偏移 > 12，那么自动换行，换到下一行的列如果具备偏移的性质，那么该偏移会依旧生效。
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md4 ">数据内容</div>
<div class="layui-col-md4 layui-col-md-offset4">偏移4</div>
</div>
</div>
结果.png
