弹性盒模型 - 弹性盒模型之flex属性，初识HTML(5)+CSS(3)-升级版教程-慕课网

弹性盒模型 - 弹性盒模型之flex属性

这一章节我们来学习flex弹性盒子模型，根据下面的例子来理解一下吧：

实现上图效果,我们需要输入以下代码:

上面的代码：

三个块元素设置大小以及背景色，在父容器中添加flex。

技术点的解释：

1、设置display: flex属性可以把块级元素在一排显示。

2、flex需要添加在父元素上，改变子元素的排列顺序。

3、默认为从左往右依次排列,且和父元素左边没有间隙。

任务

可以测试右侧编辑器中的代码，感受一下flex布局。

?不会了怎么办

问答
评论
笔记
代码

全部精华我要发布

为什么蓝色块占满后面

最赞回答 / 慕粉2237001

<...图片...>图中的background:blue;

2 回答 800 浏览

2022-04-15

子容器大小与排列方式问题

最赞回答 / qq_慕移动2452305

定义父容器大小与子容器大小一样，是不是意味着父容器被被撑爆了?答：不会被撑爆，可以利用给父元素添加 border: 1px solid red; 去观察父元素是否变形，我亲测后没有变形，因此得出不会撑爆父...

1 回答 466 浏览

2022-04-28

为什么.box是父元素？

最新回答 / iuhiiu

因为<body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div></body>div包裹着其他div标签

2 回答 486 浏览

2022-04-19

关于 flex 属性特点的整理，望指正。

最赞回答 / 麻辣烫不加辣

还有个问题想请教，我在测试时，为某个box 写上 display: inline ，希望把它改为内联元素，测试他是否还会与其他块状元素排列在同一行，结果这个定义并没有作用，这个box尽管定义为了inline属性，但是他依然是以块状元素的形势展现的，CSS中宽度和高度的定义依然有效。是因为在flex中这个display:inline 没用吗？还是其他原因？

1 回答 1025 浏览

2022-04-20

.box div{}与.box,div{}的结果不一样，.bov div是什么意思

已采纳回答 / 戏佳人

选择器。.box div{}的意思是：对一个类名为box的标签下的所有div标签进行样式修改，这里的div是box的后代。.box，div{}是群组选择器，同时对一个类名为box的标签和当前编辑代码下的所有div标签进行样式修改

1 回答 1509 浏览

2022-04-22

.box1里的height改不了

最赞回答 / 李_十一

<...图片...>.box div设置了高度，如果你直接在.box1里面设置高度是无效的，因为权重没有.box div的权重高

2 回答 515 浏览

2022-04-22

display: flex;

最新回答 / 枫枫子

display:flex;作用于父类元素，放到后面都是子类元素，子类元素没有他自己的子类元素，所以显示不出来效果。

1 回答 515 浏览

2022-04-22

flex 属性有啥特殊的地方? 可以用 float 浮动布局实现一样的效果. 区别之处是什么?

最赞回答 / yjyjyjyjyj

弹性就是你改变浏览器大小，他们会随着改变大小。float的话，大小不会改变的<...图片...>

2 回答 908 浏览

2022-12-22

rtrtrtrtrtrtrtrtr+

最新回答 / 大师课

???

2 回答 394 浏览

2022-04-25

14-1的问题

最赞回答 / 浊酒敬风尘

div本身是块级元素，元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。这里他已经设置了宽度——“width=200px”，所以左边的三个盒子没有占满父元素的蓝色盒子，把'width=200px'注释掉，运行一下就是你要的效果了。（此前已经将'display:flex'注释掉了）

2 回答 435 浏览

2022-04-25