本文介绍了微信小程序开发前的基础布局知识，对比了传统float布局与flex布局的特点与优势，并通过实例展示了flex布局的基本设置及其实现水平与垂直居中的简便方法。
微信小程序3天课程学习的第1天笔记
视频教程里,老师在开始讲微信小程序之前,补充了一个布局基础: flex布局
为后面正式的学习如何开发微信小程序,先打下一个理论基础
第1节课,老师讲了一下传统float会带来的影响及其解决方法
默认情况下: 一个父div里的3个子div 是会竖直排列的,并且父div的高度是自动撑起来的
1. 代码如下:
<div style="border:1px solid red;">
<div style="border:1px solid teal;background-color:rgb(200,200,200);height:100px;width:100px;"></div>
<div style="border:1px solid teal;background-color:rgb(200,200,200);height:100px;width:100px;"></div>
<div style="border:1px solid teal;background-color:rgb(200,200,200);height:100px;width:100px;"></div>
</div>1. 效果如下:
如果想让3个子div排列成一排,那么子div需要加入float:left;
但是这会有一个问题, 那就是父div丢失了高度
2. 代码如下:
<div style="border:1px solid red;">
<div style="float:left;border:1px solid teal;background-color:rgb(200,200,200);height:100px;width:100px;"></div>
<div style="float:left;border:1px solid teal;background-color:rgb(200,200,200);height:100px;width:100px;"></div>
<div style="float:left;border:1px solid teal;background-color:rgb(200,200,200);height:100px;width:100px;"></div>
</div>2. 效果如下:
为了解决上面由float带来的 父div高度丢失的问题,
我们需要给父div添加一个overlow: hidden;来重新计算一下父div的高度
或者手动给父div指定一个高度了
3. 代码如下:
<div style="border:1px solid red;overflow:hidden;">
<div style="float:left;border:1px solid teal;background-color:rgb(200,200,200);height:100px;width:100px;"></div>
<div style="float:left;border:1px solid teal;background-color:rgb(200,200,200);height:100px;width:100px;"></div>
<div style="float:left;border:1px solid teal;background-color:rgb(200,200,200);height:100px;width:100px;"></div>
</div>3. 效果如下:
通过上面的float所存在的问题/缺陷, 老师引入了flex布局,又叫伸缩盒子模型
Flex的设置,分成两部分;
第1部分, 是设置父容器(这部分最常用)
第2部分, 是设置子div
回到最基本的1父div + 3个子div,
首先我们仅仅只是设置了一下 父div的 display: flex;就立即实现了三个子div水平排列了(好神奇!)
1. 代码如下:
<div style="border:1px solid red;display:flex;">
<div style="border:1px solid black;background-color:rgb(220,220,220);height:100px;width:100px;"></div>
<div style="border:1px solid black;background-color:rgb(220,220,220);height:100px;width:100px;"></div>
<div style="border:1px solid black;background-color:rgb(220,220,220);height:100px;width:100px;"></div>
</div>1. 效果如下:
然后我们再设置了一下 父div的 flex-direction: row-reverse;就立即实现了三个子div 从右到左的水平排列了(真的好神奇!)
2. 代码如下:
<div style="border:1px solid red;display:flex;flex-direction:row-reverse">
<div style="border:1px solid black;background-color:rgb(220,220,220);height:100px;width:100px;">1</div>
<div style="border:1px solid black;background-color:rgb(220,220,220);height:100px;width:100px;">2</div>
<div style="border:1px solid black;background-color:rgb(220,220,220);height:100px;width:100px;">3</div>
</div>2. 效果如下:
如果我们想把3个div在flex布局中,进行竖着排列呢
那么我们只需设置一下 父div的 flex-direction: coloumn;就立即实现了三个子div 从上到下的竖直排列了(是不是好神奇!)
3. 代码如下:
<div style="border:1px solid red;display:flex;flex-direction:column">
<div style="border:1px solid black;background-color:rgb(220,220,220);height:100px;width:100px;">1</div>
<div style="border:1px solid black;background-color:rgb(220,220,220);height:100px;width:100px;">2</div>
<div style="border:1px solid black;background-color:rgb(220,220,220);height:100px;width:100px;">3</div>
</div>3. 效果如下:
老师写的总结1:
如果一个子div的大小 小于 它父div的尺寸的话
默认子div 会在父div的右上角
1. 代码如下:
<div style="width:200px;height:200px;border:1px solid red;">
<div style="border:1px solid black;background-color:rgb(220,220,220);height:100px;width:100px;">
那朵花
</div>
</div>1. 效果如下:
传统布局下,如果我们想把这个子div在父div中完全居中,
那么第1步, 将父div 的position设置为relative
第2步, 将子div 的postion设置为absolute
第3步, 将子div 的left设置为50%, top设置为50%
第4步, 将子div 的margin-left设置为 -1/2的自身的宽(不往回退的话,左边框就在中线上了)
将子div 的margin-top设置为 -1/2的自身的高(不往回退的话,上边框就在中线上了)
2. 代码如下:
<div style="position:relative;width:200px;height:200px;border:1px solid green;">
<div style="position:absolute;
left:50%;margin-left:-50px;
top:50%;margin-top:-50px;
border:1px solid black;background-color:pink;height:100px;width:100px;">
那朵花
</div>
</div>2. 效果如下:
传统布局下,如果我们想把这个子div在父div中完全居中,还有第2种方法
前3步,都是一样的,只是第4步,换了一种写法而已,步骤如下:
第1步, 将父div 的position设置为relative
第2步, 将子div 的postion设置为absolute
第3步, 将子div 的left设置为50%, top设置为50%
第4步, 将子div 的transform设置为translate(-50%,-50%) (如果不往回退的话,左边框和上边框就在中线上了)
3. 代码如下:
<div style="position:relative;width:200px;height:200px;border:1px solid black;">
<div style="position:absolute;
left:50%;top:50%;
transform:translate(-50%,-50%);
border:1px solid teal;background-color:pink;height:100px;width:100px;">
那朵花
</div>
</div>3. 效果如下:
是不是很复杂?
如果使用flex的话, 让一个子div在父div中居中, 只需要在父div里写下这3行代码即可(哇,好神奇!)
1. display: flex;
2. justify-content: center; (水平居中)
3. align-items: center; (垂直居中)
1. 代码如下:
<div style="display:flex;justify-content:center;align-items:center;
width:200px;height:200px;border:1px solid black;">
<div style="
border:1px solid orange;background-color:teal;color:white;
height:100px;width:100px;">
那朵花
</div>
</div>1. 效果如下:
flex布局中,在水平方向上justify-content还有一个非常常见的设置: space-between
它的作用是: 让N子div在水平方向均布
例如最常见的设置菜单: 左边一个label文本, 右边一个arrow箭头或者switch开关
2. 代码如下:
<div style="display:flex;justify-content:space-between;align-items:center;
width:200px;height:200px;border:1px solid black;">
<div style="
border:1px solid orange;background-color:teal;color:white;
">
夜间模式
</div>
开>
</div>
2. 效果如下
flex布局中,实际开发中,align-items还有一个值flex-end比较常见,
其作用是,让所有的子元素全部底部对齐
3. 代码如下:
<div style="display:flex;justify-content:space-between;align-items:flex-end;
width:200px;height:200px;border:1px solid black;">
<div style="
border:1px solid orange;background-color:teal;color:white;
">
六月
</div>
<div style="
border:1px solid orange;background-color:teal;color:white;
height:50px;
">
七月
</div>
详情>
</div>3. 效果如下:
老师的总结2:
关于flex布局的换行问题,我们先来看一下
如果有10个item,想分成2行,每一行放5个item,每一个Item的 宽度为25%
但是,实际上却没有效果
1. 代码如下:
<style type="text/css">
*{
margin:0;
padding: 0;
}
.class_div_container{
/* 水平居中 */
margin:0 auto;
width:640px;
height:600px;
border:1px solid black;
display:flex;
}
.class_div_sub{
border:1px solid orange;
background-color:teal;
color:white;
/*5个一排*/
width:20%;
height:100px;
}
</style>
<div class="class_div_container">
<div class="class_div_sub">1</div>
<div class="class_div_sub">2</div>
<div class="class_div_sub">3</div>
<div class="class_div_sub">4</div>
<div class="class_div_sub">5</div>
<div class="class_div_sub">6</div>
<div class="class_div_sub">7</div>
<div class="class_div_sub">8</div>
<div class="class_div_sub">9</div>
<div class="class_div_sub">10</div>
</div>2. 效果如下:
为此,我们需要引入flex中 父容器的另一个 属性 flex-warp: warp;
3. 代码如下:
<style type="text/css">
.class_div_container{
/* 水平居中 */
margin:0 auto;
width:750px;
height:400px;
border:1px solid black;
display:flex;
flex-wrap:wrap;
}
.class_div_sub{
border:1px solid orange;
background-color:teal;
color:white;
/*5个一排*/
width:20%;
height:100px;
}
</style>
<div class="class_div_container">
<div class="class_div_sub">1</div>
<div class="class_div_sub">2</div>
<div class="class_div_sub">3</div>
<div class="class_div_sub">4</div>
<div class="class_div_sub">5</div>
<div class="class_div_sub">6</div>
<div class="class_div_sub">7</div>
<div class="class_div_sub">8</div>
<div class="class_div_sub">9</div>
<div class="class_div_sub">10</div>
</div>3. 效果如下:
上面虽然按要求进行换行了, 但是又有一个问题...
那就是父容器的高度...太高了...
一般来说, 我们都是把这10个item放到一个header中(header里面进行flex-wrap:wrap),
然后再把header放到大的容器中
4. 代码如下:
<style type="text/css">
/**{
margin:0;
padding: 0;
}*/
.class_div_container{
/* 水平居中 */
margin:0 auto;
width:750px;
height:300px;
border:1px solid black;
}
/*必须加一个中间层,来自适应高度*/
.class_div_header{
display:flex;
flex-wrap:wrap;
}
.class_div_sub{
border:1px solid orange;
background-color:teal;
color:white;
/*5个一排*/
width:20%;
height:100px;
/*box-sizing: border-box;*/
}
</style>
<div class="class_div_container">
<div class="class_div_header">
<div class="class_div_sub">1</div>
<div class="class_div_sub">2</div>
<div class="class_div_sub">3</div>
<div class="class_div_sub">4</div>
<div class="class_div_sub">5</div>
<div class="class_div_sub">6</div>
<div class="class_div_sub">7</div>
<div class="class_div_sub">8</div>
<div class="class_div_sub">9</div>
<div class="class_div_sub">10</div>
</div>
</div>4. 效果如下:
下面开始正式实现首页的样式
先用传统方法: float:left + overflow:hidden来实现
1. 代码如下:
<style type="text/css">
*{
margin:0;
padding: 0;
list-style: none;
text-decoration: none;
}
.class_div_carousel img{
width:100%;
}
.class_div_panel li {
width: 33.3333%;
height: 100px;
border: 1px solid #ccc;
text-align: center;
/* 水平排列 */
float:left;
box-sizing: border-box;
}
/* 必须设置overflow: hidden; */
.class_div_panel ul {
overflow: hidden;
background-color: white;
}
/* 图片 */
.class_div_panel li img {
width: 40px;
/* 这是估算的 */
margin-top: 22px;
}
/* 字体 */
.class_div_panel li p {
font-size: 14px;
color: #333;
}
</style>
<!-- 轮播图 -->
<div class="class_div_carousel">
<img src="img/menma.jpg">
</div>
<!-- 面板 3*3 = 9个按钮 -->
<div class="class_div_panel">
<ul>
<li>
<a href="">
<img src="img/beyond.jpg" />
<p>未闻花名</p>
</a>
</li>
<li>
<a href="">
<img src="img/mathilda.jpg" />
<p>mathilda</p>
</a>
</li>
<li>
<a href="">
<img src="img/jennifer.png" />
<p>美国往事</p>
</a>
</li>
<li>
<a href="">
<img src="img/beyond.jpg" />
<p>未闻花名</p>
</a>
</li>
<li>
<a href="">
<img src="img/mathilda.jpg" />
<p>mathilda</p>
</a>
</li>
<li>
<a href="">
<img src="img/jennifer.png" />
<p>美国往事</p>
</a>
</li>
<li>
<a href="">
<img src="img/beyond.jpg" />
<p>未闻花名</p>
</a>
</li>
<li>
<a href="">
<img src="img/mathilda.jpg" />
<p>mathilda</p>
</a>
</li>
<li>
<a href="">
<img src="img/jennifer.png" />
<p>美国往事</p>
</a>
</li>
</ul>
</div>1. 效果如下:
接下来使用flex布局,实现ul里的li水平排列, 3个一折行
并且使用flex布局,实现a里面的img和p 垂直排列,并居中
2. 代码如下:
<style type="text/css">
*{
margin:0;
padding: 0;
list-style: none;
text-decoration: none;
}
.class_div_carousel img{
width:100%;
}
/* 将ul 里的 li 水平排列并且flex-wrap */
.class_div_panel ul {
display: flex;
flex-wrap:wrap;
}
.class_div_panel li {
width: 33.3333%;
border: 1px solid #ccc;
box-sizing: border-box;
}
.class_div_panel li a {
/* 要想 a 里的图片img 和 文字p 垂直居中
第1步, 给a这个父容器,设置flex布局
*/
height: 100px;
display: flex;
/* 第2步, flex内的子元素 img 和 p 默认是水平排列
将img 和 p 改成垂直排列
*/
flex-direction: column;
/* 第3步, 将img 和 p 居中*/
/* 水平 */
justify-content: center;
/* 垂直 */
align-items: center;
}
.class_div_panel ul {
background-color: white;
}
/* 图片 */
.class_div_panel li img {
width: 40px;
}
/* 字体 */
.class_div_panel li p {
font-size: 14px;
color: #333;
}
</style>
<!-- 轮播图 -->
<div class="class_div_carousel">
<img src="img/menma.jpg">
</div>
<!-- 面板 3*3 = 9个按钮 -->
<div class="class_div_panel">
<ul>
<li>
<a href="">
<img src="img/beyond.jpg" />
<p>未闻花名</p>
</a>
</li>
<li>
<a href="">
<img src="img/mathilda.jpg" />
<p>mathilda</p>
</a>
</li>
<li>
<a href="">
<img src="img/jennifer.png" />
<p>美国往事</p>
</a>
</li>
<li>
<a href="">
<img src="img/beyond.jpg" />
<p>未闻花名</p>
</a>
</li>
<li>
<a href="">
<img src="img/mathilda.jpg" />
<p>mathilda</p>
</a>
</li>
<li>
<a href="">
<img src="img/jennifer.png" />
<p>美国往事</p>
</a>
</li>
<li>
<a href="">
<img src="img/beyond.jpg" />
<p>未闻花名</p>
</a>
</li>
<li>
<a href="">
<img src="img/mathilda.jpg" />
<p>mathilda</p>
</a>
</li>
<li>
<a href="">
<img src="img/jennifer.png" />
<p>美国往事</p>
</a>
</li>
</ul>
</div>2. 效果如下:
补充一点: 关于 边框 的细节处理
首先使用传统的方法:
.class_div_panel li {
width: 33.3333%;
box-sizing: border-box;
/*border: 1px solid #ccc;*/
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
/* 第3 6 9 的右边不需要边框*/
.class_div_panel li:nth-child(3n) {
border-right: 0 none;
}第2种, 使用伪元素的方法来设置右边框
代码如下:
.class_div_panel li {
width: 33.3333%;
box-sizing: border-box;
/* 底部的边框直接写 */
border-bottom: 1px solid #eee;
/* 使用 绝对布局的伪元素 来实现右边框 */
position: relative;
}
.class_div_panel li::after {
/* content 必须写 */
content: '';
position: absolute;
right: 0;
top: 0;
width: 1px;
height: 100%;
background: #eee
}
/* 第3 6 9 的右边不需要边框*/
.class_div_panel li:nth-child(3n)::after {
width: 0;
}效果如下:
未完待续,下一章节,つづく
扫一扫
1945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
