大佬教程收集整理的这篇文章主要介绍了html – 为什么Flex容器中的元素保持在同一行?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<div style="display: flex"> <div style="display: inline-block"> This is an inline block element </div> <div style="display: inline-block"> This is an inline block element </div> <div style="display: block"> This is a block element </div> </div>
所以在这里我想要两个第一个div在同一行,最后一个在第二行.可悲的是,这似乎不行.
任何人都有想法?
您可以使用flex-wrap:wrap覆盖默认值.
在flex布局中忽略flex项目的显示值.
一个flex容器,它是一个显示元素:flex或display:inline-flex,建立了一个flex formatting context.尽管与block formatting context类似,但存在差异.
一个区别是Flex容器的子项忽略了显示属性.
另一个区别是,在柔性容器中,边缘不会崩溃,浮动和清除属性没有任何作用.
Flex容器还具有几个默认设置.其中:
> justify-content:flex-start – flex项将堆叠在行的开头
>弹性收缩:1 – 柔性物品允许收缩,不会溢出容器
> align-items:stretch – flex项目将展开以覆盖容器的十字尺寸
> flex-direction:row – flex项将水平对齐
> flex-wrap:nowrap – flex项目被迫留在单行中
注意最后两个项目.
Flex项目将排成一行,不能包装.
如果要在第一行有两个flex项目,而第二行上有第三个项目,则允许容器与flex-wrap:wrap多行.
.container { display: flex; flex-wrap: wrap; } .box { flex: 0 0 45%; height: 50px; margin: 5px; BACkground-color: lightgreen; border: 1px solid #ccc; }
<div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
另外,如果要使Flex容器显示为内联,请使用display:inline-flex不显示:flex.这些可以显示:inline-block和display:block.
以上是大佬教程为你收集整理的html – 为什么Flex容器中的元素保持在同一行?全部内容,希望文章能够帮你解决html – 为什么Flex容器中的元素保持在同一行?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。