我正在尝试让 Flexbox 在移动设备上运行,特别是 iPhone 5。我的目标是在 iPad 和计算机显示器等大屏幕上以及在移动设备上的一列中让 3 个元素跨越整个页面。我使用了用户 Cimmanon 生成的代码:3 Column Responsive CSS (Ordering Contents Positions)尽可能接近。我是一名经验丰富的开发人员(主要从事数据库工作),但在 Web 开发方面是一个相对较新的人,并且对我缺乏成功感到沮丧。
我正在使用 Dreamweaver CC 进行编码。当我使用下面的 CSS 时,我的页面按我认为应该的方式显示,当我在 Chrome、IE 和 Firefox 中上传和测试时,我得到了我期望的结果:当浏览器窗口较宽时横跨 3 个元素,当窗口较窄时一列包含 3 个元素。但是,当我使用 iPhone 时,当我想要获取的是列时,我继续获取包含 3 个元素的行。
我现在已经在这上面花了很多时间,如果有人能提供任何帮助,我将不胜感激。提前致谢。
/*** FLEXBOX ***************************************/
/* SECTIONS */
.section {
clear: both;
padding-top:50px;
margin: 0px;
}
.a {
background-color: #fff;
text-align: center;
padding-top: 20px;
}
.b {
background-color: #fff;
text-align:center;
padding-top:20px;
}
.c {
background-color: #fff;
text-align:center;
padding-top:20px;
}
/* GRID OF THREE ============================================================================= */
@media only screen and (min-width: 640px) {
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 32.2%;
}
/* COLUMN SETUP */
.col {
display: block;
float: left;
margin: 1% 0 1% 1.6%;
}
.col:first-child {
margin-left: 0;
}
}
@media only screen and (max-width: 640px) {
.section {
display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%; /* fix for Firefox */
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
left: 0px;
right: 0px;
padding-left: 0px;
}
.a {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-flex-order: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
.b {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-webkit-flex-order: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.c {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-webkit-flex-order: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}
}
最佳答案
除此之外还有很多博客写的,像iOS这样的移动操作系统还不支持flex方向:
关于html - Flexbox 不会在移动设备上从行切换到列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17801091/