将响应式设计中顶部的元素移动到底部的最佳方式是什么？ [英] What is the best way to move an element that's on the top to the bottom in Responsive design
问题描述
我有以下HTML格式，将给定元素放置在桌面顶部和移动设备底部（宽度<640像素）上的有效方式是什么？由于有很多不同的设备，我不想写位置坐标，因为页面的高度的内容不同。有任何建议吗？
I have the following HTML format, what is the efficient way to position the given element on the top on a desktop and bottom on mobile devices (width < 640pixels)? Since there are lots of different devices, I don't want to write the position coordinates since the contents of the page's height varies. Any suggestions?
<html>
<head>
..
</head>
<body>
..
<p>I am on the top of desktop page, and bottom of mobile page</p>
...
</body>
</html>
推荐答案
以响应时尚重新排列未知高度的元素完成与Flexbox。虽然桌面浏览器的支持不大（IE是主要的限制因素，支持从v10开始），大多数移动浏览器都会 支持。
Reordering elements of unknown heights in a responsive fashion is best done with Flexbox. While support isn't great for desktop browsers (IE being the primary limiting factor here, support starts with v10), most mobile browsers do support it.
http://cssdeck.com/labs/81csjw7x
@media (max-width: 30em) {
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
/* optional */
-webkit-box-align: start;
-moz-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.container .first {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
}
http://caniuse.com/#feat=flexbox
请注意，Flexbox可能会与其他布局方法发生冲突，例如典型的网格技术。设置为float的Flex项目可能会在使用2009规范（ display：-webkit-box ）的Webkit浏览器中导致意外结果。
Be aware that Flexbox can clash with other layout methods, such as the typical grid techniques. Flex items that are set to float can cause unexpected results in Webkit browsers using the 2009 specification (display: -webkit-box).
这篇关于将响应式设计中顶部的元素移动到底部的最佳方式是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
