vlambda
2022-02-21

移动web开发(3)之flex弹性布局

终于学到弹性盒子了呜呜呜,但是感觉内容也好多!!!

移动web开发之flex布局

移动web开发(3)之flex弹性布局

建议:

如果是PC端页面布局,我们还是传统布局
如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex弹性布局.

例子:

过去我们要在一个大盒子里面放三个这样的盒子,都是用的浮动,但是学习了弹性flex布局,我们可以更简单的做出来,为了凸显它的优势,用的还是行内元素span,只要用了flex,行内元素也可以直接设置大小.

移动web开发(3)之flex弹性布局

只需要在父元素的样式中添加一行:

display:flex;

<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { display: flex; width: 80%; height: 400px; background-color: pink; } span { color: #fff; width: 300px; height: 300px; /* margin: 5px; */ background-color: purple; }</style></head>
<body> <div class="box"> <span>1</span> <span>2</span> <span>3</span> </div></body>
</html>

还可以实现很多其他的效果,比如

 justify-content: space-around;

就能让盒子以其他的方式排列.

移动web开发(3)之flex弹性布局

布局原理

flex是flexible box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局.

当我们为父盒子设为flex布局以后,子元素的float/clear/vertical-align属性将失效.
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局.

采用flex布局的元素,称为flex容器(flex container),简称"容器",它的所有子元素自动成为容器成员,称为flex项目,简称"项目".

例子中的div就是容器,flex父容器.
例子中span就是子容器flex项目.
子容器可以横向排列也可以纵向排列.

总结flex布局原理:

就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式.

移动web开发(3)之flex弹性布局

01

父项常见属性

flex-direction:设置主轴方向.
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素的排列方式(单行)
flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap

太懒了我就不打字了,直接上图片吧.

移动web开发(3)之flex弹性布局

注意:

默认的主轴是x轴,行,row,那么剩下的侧轴就必然是y轴啦
我们的元素是根据主轴排列的

移动web开发(3)之flex弹性布局

根据我们以往的经验,当几个盒子浮动排列在一行时,盒子一行挤不下的时候会掉下去,但是flex布局就不一样了.

现在这是一个即将被塞满的大盒子,我们再往里面放一个盒子,看看会发生什么现象呢.

移动web开发(3)之flex弹性布局

很明显,他给我们硬塞在一行上去了,原先的盒子的大小也被强行改变了.

移动web开发(3)之flex弹性布局

于是就引出了下一个知识点.

移动web开发(3)之flex弹性布局

那我们能不能垂直居中,又水平居中呢?

其实我们只要两步:让盒子在主轴上水平居中,又让盒子在侧轴垂直居中就可以实现啦.

移动web开发(3)之flex弹性布局

做出来的效果:

移动web开发(3)之flex弹性布局

但是也有主侧轴的问题,假如我设置的主轴是y轴,再让侧轴居中,出来的效果就是:

移动web开发(3)之flex弹性布局

但是这个属性只适用于单行文本.

移动web开发(3)之flex弹性布局

align-items和align-content的区别

align-items适用于单行情况下,只有上对齐,下对齐,居中和拉伸.
align-content适用于换行(多行)的情况下(单行时无效),可以设置上对齐,下对齐,居中,拉伸以及平均分配剩余空间等属性值.
总结就是单行找align-items,多行找align-content.

移动web开发(3)之flex弹性布局

02

子项常见属性

flex子项目占的份数
align-self控制子项在自己侧轴的排列方式.
order属性定义子项的排列顺序(前后顺序)

flex属性定义子项目分配剩余空间,用flex来表示占多少份数.

.items {

flex:<number>;(默认为0)

}

圣杯布局:

圣杯布局就是三列模式,两边的盒子定宽,贴在两侧,中间自适应.

已关注

Replay Share Like

睡不着所以学编程

Added to Top Stories

0 / 0

00:00 / 00:07

睡不着所以学编程

Added to Top Stories

全屏

倍速播放中

继续观看

移动web开发(3)之flex弹性布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> section { display: flex; width: 80%; background-color: pink; height: 150px; margin: 0 auto; }
 .one { height: 150px; background-color: purple; width: 100px; }
 .two { background-color: chartreuse; height: 100px; flex: 1; margin-top: 25px; }
 .three { width: 100px; height: 150px; background-color: blue; }</style></head><body> <section> <div class="one"></div> <div class="two"></div> <div class="three"></div> </section></body></html>