Flexbox布局问题.跨多行的flexbox项
Flexbox布局问题.跨多行的flexbox项
提问于 2014-06-13 16:41:06
我最近发布了一个类似的问题，但是我没有得到我想要的答案。也许是因为这不可能。我想再问一次更详细的问题。我现在有这个布局，使用柔性盒，我对此很满意。
但我希望ipad有这样的布局
使用此html
<body>
<header>Header</header>
<p>image</p>
<div class="main_content">Main Content</div>
<div class="gallery_filter">Filter</div>
<aside class="gallery_upload">Upload</aside>
<div class="g_ads">Box</div>
<footer>Footer</footer>
</body>在不改变任何HTML的情况下，是否可以使用flexbox重新创建布局。http://jsfiddle.net/V4GMK/
小提琴不好看，但我希望你能明白。我只是看不出我想要的布局。
谢谢你的帮助。
回答 1
Stack Overflow用户
发布于 2015-02-27 12:53:47
不改变的，我认为这可能是你想要的方向。
这是一个更新的jsFiddle，
这是代码，以防链接到每一个断点：
<body>
<header>Header</header>
<p>image</p>
<div class="main_content">Main Content</div>
<div class="gallery_filter">Filter</div>
<aside class="gallery_upload">Upload</aside>
<div class="g_ads">Box</div>
<footer>Footer</footer>
</body>
* {
margin:0;
padding:0;
}
body {
display: flex;
flex-flow: row wrap;
height:100%;
}
body > * {
padding: 10px;
margin-right:10%;
flex: 1 90%;
}
header {
background: #ED1B24;
height:35px;
}
footer {
background: #7F7F7F;
}
.main_content {
text-align: left;
background: #A349A3;
min-height:200px;
}
.gallery_filter {
background: #FEAEC9;
}
p {
background: #FF7F26;
height:50px;
}
.gallery_upload {
background: #00A3E8;
}
.g_ads {
padding: 0;
margin: 0;
flex: 4 10%;
background: #7092BF;
height:100%;
width: 10%;
position: absolute;
right: 0;
}
.gallery_filter, .gallery_upload { flex: 0 2 44%; margin:0; }
.main_content { flex: 3 90%; }
header { order: 2; }
p { order: 3; }
.gallery_filter { order: 4; }
.gallery_upload { order: 5; }
.main_content { order: 6; }
footer { order: 7; }
.g_ads { order: 1; }正如您所看到的，我根本没有更改您的HTML。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24210129
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号