如何使用flex水平显示小时? [英] How to display hr horizontally with flex?
本文介绍了如何使用flex水平显示小时?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使用flexbox进行样式设计时,如果父容器设置为 display:flex
,则会导致< hr />
可以垂直显示,而不是水平显示。
.container {display:flex; flex:1;}
< div class ='container > < H2>试验< / H2> < hr />< / div>
解决方案使用
flex-grow:1
或 width:100%
匹配父级的宽度。如果您打算放置更多的flex,您可能希望将它与 flex-wrap:wrap
一起用于 .container
.container
中的孩子
.container {display:flex; flex:1;} hr {flex-grow:1; / *宽度:100%; * / / *或this * /}
< div类= '容器' > < hr>< / div>
When using flexbox for styling, if the parent container is set to display: flex
it will cause the <hr />
to be displayed vertically instead of horizontally.
.container {
display: flex;
flex: 1;
}
<div class='container'>
<h2>Test</h2>
<hr />
</div>
解决方案
Use flex-grow: 1
or width: 100%
so it will grow to match the width of the parent. You probably want to use that in combination with flex-wrap: wrap
on .container
if you plan on putting more flex children in .container
.container {
display: flex;
flex: 1;
}
hr {
flex-grow: 1;
/* width: 100%; */ /* or this */
}
<div class='container'>
<hr>
</div>
这篇关于如何使用flex水平显示小时?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文