如何使用flexbox将列分成多行? [英] How to get columns to break into rows with flexbox?
本文介绍了如何使用flexbox将列分成多行?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有人可以告诉我如何让这四个输入元素分解成行当屏幕宽度低于680px?
form {display: flex;} input {width:25%;}
< ;形式> < input type =text/> < input type =text/> < input type =text/> < input type =text/>< / form>
h2_lin>解决方案
使用断点为680px且 flex-direction:column;
方向:栏目; }
< form> < input type =text/> < input type =text/> < input type =text/> < input type =text/>< / form>
I have this form with four input elements in a row (in desktop view).
Can anybody tell me how to get those four input elements to break into rows when the screen width gets below, say, 680px?
form {
display: flex;
}
input {
width: 25%;
}
<form>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</form>
解决方案
Use a media query with a breakpoint of 680px and flex-direction:column;
form {
display: flex;
}
@media screen and (max-width: 680px) {
form {
flex-direction: column;
}
}
<form>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</form>
这篇关于如何使用flexbox将列分成多行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文