【17周 02 响应布局 4-2 头部header区域】bar可以不写display:block,在父容器中用flex-direction:column吗?

【17周 02 响应布局 4-2 头部header区域】bar可以不写display:block,在父容器中用flex-direction:column吗?

问题描述:

btn-bar可以不写display:block,

在父容器btn-container中直接用flex-direction:column吗?


相关截图:

https://img1.sycdn.imooc.com//climg/6230046b09e8a92008560336.jpg

https://img1.sycdn.imooc.com//climg/62300453094c7b5806880396.jpg


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕久久 2022-03-15 11:31:16

同学你好,不行的。同学可以实践一下,看看有没有效果,老师这边测试是不行的。给.header-btn-container设置flex-direction:column,并不会影响到其孙子元素.btn-toggle-bar的性质。给.btn-toggle-bar设置display:block;是为了让其具备块级元素的性质,即能设置宽高,有宽高我们才能看到它们。

祝学习愉快!


  • 提问者 easyschen #1

    刚刚试了下,可以的,在父亲盒子 .btn-toggle上面写justify-content:column,可以实现bar纵向排列

    https://img1.sycdn.imooc.com//climg/62301a18092dd35b06540894.jpg


    2022-03-15 12:47:36
  • 好帮手慕久久 回复 提问者 easyschen #2

    同学这样写是可以的。这种写法与第一次提问中的方式是不同的。第一次提问是给.header-btn-container设置flex-direction:column。

    .btn-toggle设置flex布局后,它的儿子元素(span.btn-toggle-bar)就会具备块级元素部分性质,此时可以直接设置宽高,不用借助display属性。

    2022-03-15 14:34:41
  • 提问者 easyschen 回复 好帮手慕久久 #3

    明白了哈。确实问的时候没说清楚。 感谢老师指导哈。



    2022-03-16 08:44:57
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师