Css Flexbox布局问题-Flexbox项跨越多行
我最近发布了一个类似的问题，但是我没有得到我想要的答案。也许是因为这是不可能的。我想我应该再问一次更详细的问题。我现在有这个布局，使用flexbox，我很满意 但我希望ipad有这样的布局 使用此htmlCss Flexbox布局问题-Flexbox项跨越多行,css,mobile,layout,responsive-design,flexbox,Css,Mobile,Layout,Responsive Design,Flexbox,我最近发布了一个类似的问题，但是我没有得到我想要的答案。也许是因为这是不可能的。我想我应该再问一次更详细的问题。我现在有这个布局，使用flexbox，我很满意 但我希望ipad有这样的布局 使用此html <body> <header>Header</header> <p>image</p> <div class="main_content">Main Content</div> <di
<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的情况下，我想这可能是您想要的方向
这是一个
下面是代码，以防每次链接中断：
<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; }
标题
形象
主要内容
滤器
上传
盒子
页脚
* {
保证金：0；
填充：0；
}
身体{
显示器：flex；
柔性流：行换行；
身高：100%；
}
正文>*{
填充：10px；
保证金权利：10%；
弹性：190%；
}
标题{
背景：#ED1B24；
高度：35px；
}
页脚{
背景#7F7F7F；
}
.主要内容{
文本对齐：左对齐；
背景#A349A3；
最小高度：200px；
}
.图库过滤器{
背景：#FEAEC9；
}
p{
背景#FF7F26；
高度：50px；
}
.gallery_上传{
背景：#00A3E8；
}
g_广告{
填充：0；
保证金：0；
弹性：4.10%；
背景#7092BF；
身高：100%；
宽度：10%；
位置：绝对位置；
右：0；
}
.gallery_筛选器、.gallery_上载{flex:0 2 44%；边距：0；}
.main_内容{flex:390%；}
标题{顺序：2；}
p{顺序：3；}
.gallery_过滤器{顺序：4；}
.gallery_上传{顺序：5；}
.main_内容{顺序：6；}
页脚{顺序：7；}
.g_ads{顺序：1；}
正如您所看到的，我根本没有更改您的HTML。如果不更改HTML，使用Flexbox恐怕无法做到这一点。要获得第二个布局，需要在最左侧区域周围放置一个容器，在其余区域周围放置一个容器。网格布局更容易解决这一问题，目前它缺乏任何合理的浏览器支持：啊，我很担心。最后我把它包在一个div标签上，它就这样工作了。好奇的是，在哪一点上，你会对自己说，“我现在将在网站上实现这一点，即使它没有得到广泛的支持”？例如，您会使用仅支持60%的产品吗？感谢@stephenhayI，我现在正在生产中使用Flexbox。你绝对可以也应该这样做。也就是说，我将它用于组件（这是它的优势所在），而不是页面布局。通常，回退很简单（display:table、display:inline block等），但您必须接受回退的工作方式有点不同。对于不会破坏站点的东西，我会在规范稳定后尽快使用它们。Flexbox是，Grid不是。