将流体嵌套柔性盒网格转换为手机堆叠

我正在将CSS3 Flexible Box用于跨设备网站。将流体嵌套柔性盒网格转换为手机堆叠

我有一个现有的Flexbox的布局为桌面设备，像这样：

body { 
 
    text-align: center; 
 
} 
 

 
.wrapper { 
 
    background-color: white; 
 
    display: flex; 
 
} 
 

 
.nested-wrapper1 { 
 
    background-color: cyan; 
 
    width: 50% 
 
} 
 

 
.nested-wrapper2 { 
 
    background-color: pink; 
 
    width: 50% 
 
}

<html> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <div class="nested-wrapper1"> 
 
     <div class="1">1</div> 
 
    </div> 
 
    <div class="nested-wrapper2"> 
 
     <div class="2">2</div> 
 
     <div class="3">3</div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

如何创建只有1,2是在网格移动设备的流体布局3应堆放在1,2以下;请参考下面的图片：

Fluid Nested Flexbox

来源

2017-09-14 Taher Jodhpurwala

你想3应该是100％的宽度？ –

@DavidGenger是3移动设备的宽度应为100％，低于1,2的宽度分别为50％。 –

它有点不同 –

也许存在与flexbox的方式 - 假设移动视图低于650像素，位置第三DIV 绝对相对于wrapper。

可能的问题可能是第三个div完全溢出wrapper。那么，看看下面的演示：

body { 
 
    text-align: center; 
 
} 
 

 
.wrapper { 
 
    background-color: #ddd; 
 
    display: flex; 
 
    position: relative; 
 
} 
 

 
.nested-wrapper1 { 
 
    display: flex; 
 
    width: 50%; 
 
} 
 

 
.nested-wrapper2 { 
 
    width: 50%; 
 
} 
 

 
.nested-wrapper1>[class='1'] { 
 
    background-color: cyan; 
 
    padding: 1em; 
 
    flex: 1; 
 
} 
 

 
.nested-wrapper2>[class='2'] { 
 
    background-color: pink; 
 
    padding: 1em; 
 
} 
 

 
.nested-wrapper2>[class='3'] { 
 
    background: lightblue; 
 
    padding: 1em; 
 
} 
 

 
@media screen and (max-width: 650px) { 
 
    .nested-wrapper2>[class='2'] { 
 
    height: 100%; 
 
    } 
 
    .nested-wrapper2>[class='3'] { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    transform: translateY(100%); 
 
    } 
 
}

<div class="wrapper"> 
 
    <div class="nested-wrapper1"> 
 
    <div class="1"> 
 
     1. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
     survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
    </div> 
 
    </div> 
 
    <div class="nested-wrapper2"> 
 
    <div class="2"> 
 
     2. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
     2. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
    </div> 
 
    <div class="3"> 
 
     3. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
     survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-09-14 16:40:05 kukkuz

这对我来说非常合适。你真棒:) 干杯，谢谢你！移动设备上的第三个div有一个小问题，因为位置是绝对的，它与下面的div重叠，我已经通过为div隐藏后面的div来修复该问题，该div等于div 3的高度可能有一个我还没有意识到的优雅解决方案。 –

你可以做到这一点使用display:contents和媒体查询。

Codepen Demo

Display:contents @ MDN

这些元素本身不会产生特定的盒子。他们被他们的伪箱子和他们的子箱子取代。

关闭元素的显示，使其对布局没有任何影响（文档呈现为元素不存在）。所有后代元素也都关闭了其显示。

支持 ...很差。 Chrome的58 & FF37 - 无IE/EDGE /歌剧/ Safari浏览器

body { 
 
    text-align: center; 
 
} 
 

 
.wrapper { 
 
    background-color: white; 
 
    display: flex; 
 
} 
 

 
.nested-wrapper1 { 
 
    background-color: cyan; 
 
    width: 50% 
 
} 
 

 
.nested-wrapper2 { 
 
    background-color: pink; 
 
    width: 50% 
 
} 
 

 
.r-2 { 
 
    background: red; 
 
} 
 

 
.r-3 { 
 
    background: yellow; 
 
} 
 

 
@media (max-width:600px) { 
 
    .wrapper { 
 
    flex-wrap: wrap; 
 
    } 
 
    .nested-wrapper2 { 
 
    display: contents; 
 
    } 
 
    .l-1, 
 
    .r-2 { 
 
    flex: 0 0 50%; 
 
    } 
 
    .r-3 { 
 
    width: 100%; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div class="nested-wrapper1"> 
 
    <div class="l-1">1</div> 
 
    </div> 
 
    <div class="nested-wrapper2"> 
 
    <div class="r-2">2</div> 
 
    <div class="r-3">3</div> 
 
    </div> 
 
</div>

来源

2017-09-14 14:13:06

谢谢你和你的见解。目前适用于Mozilla。很明显，这是一个更清洁的，但正如你上面所述 - 它目前不提供跨浏览器支持。 –

虽然OP已要求Flexbox的解决方案，并且我不知道你能做到这一点的布局， flexbox，你可以使用浮动。

根据内容和元素的需要比例，此方法可能或可能不起作用。

body { 
 
    margin: 0; 
 
} 
 
.flexo { 
 
    height: 200px; 
 
} 
 
.flexo > div { 
 
    float: left; 
 
    width: 50%; 
 
    height: 66.66666%; 
 
} 
 
.flexo > div:nth-child(1) { 
 
    background-color: dodgerblue; 
 
} 
 
.flexo > div:nth-child(2) { 
 
    background-color: deeppink; 
 
} 
 
.flexo > div:nth-child(3) { 
 
    background-color: limegreen; 
 
} 
 
.flexo > div:nth-child(3) { 
 
    height: 33.33333%; 
 
    width: 100%; 
 
} 
 

 
@media (min-width: 480px) { 
 

 
    .flexo > div:nth-child(1) { 
 
    height: 100%; 
 
    } 
 
    .flexo > div:nth-child(2), 
 
    .flexo > div:nth-child(3) { 
 
    height: 50%; 
 
    width: 50%; 
 
    } 
 

 
} 
 

 
.cf:before, 
 
.cf:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 
.cf:after { 
 
    clear: both; 
 
}

<div class="flexo cf"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
</div>

来源

2017-09-14 14:24:45 hungerstar

如果我们使用花车，您的答案会很好，谢谢您的时间和见解:) –

将流体嵌套柔性盒网格转换为手机堆叠

回答

相关问题