將流體嵌套柔性盒網格轉換爲手機堆疊

我正在將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

如果我們使用花車，您的答案會很好，謝謝您的時間和見解:) –

將流體嵌套柔性盒網格轉換爲手機堆疊

回答

相關問題