2017-11-25 153 views
0

共享專欄中,我想打一個holygrail般的佈局如下:Flexbox的佈局 - 沒有JS

flexbox layout fullscreen

將變成一個小屏幕上顯示如下:

flexbox layout small screen

有沒有CSS的方式來做到這一點,沒有JS黑客?

+0

的又一可能複製https://stackoverflow.com/questions/41790378/css-flexbox-group-2-flex-items?rq=1 – LGSon

+0

而另一個鏈接到一個問題,沒有一個公認的答案。也許我們這次可以找到答案,並在將來繼續關聯這個問題? :) – Aydin4ik

+0

只是因爲一個答案沒有接受,並不意味着它不能被鏈接,只要鏈接的答案(s)有一個解決方案:) – LGSon

回答

1

您可以用Flexbox的做(如果設置父固定的高度,例如100vh),但在這種情況下,這樣做的首選方法是用電網

* {margin:0;padding:0;box-sizing:border-box} 
 
html, body {width:100%} 
 

 
#container { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr; /* makes two columns, can also use 50% 50%, repeat(2, 1fr) or repeat(2, 50%), fr stands for fractions */ 
 
    grid-auto-rows: 150px; /* adjust or don't use at all, not mandatory */ 
 
    grid-gap: 5px 0; /* adjust, atm. 5px vertical gap, 0px horizontal */ 
 
    color: #fff; 
 
    font-size: 4em; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 

 
#container > div:nth-child(2) { /* can also use :nth-of-type(2) */ 
 
    grid-column: 1; /* puts the blue one in the left column */ 
 
    grid-row: 1/3; /* span two rows */ 
 
} 
 

 
@media screen and (max-width: 568px) { /* adjust */ 
 
    #container { 
 
    grid-template-columns: 1fr; /* makes one column, can also use 100% */ 
 
    grid-gap: 0; 
 
    } 
 
    #container > div:nth-child(2) { 
 
    grid-row: 2; /* puts it back where it belongs */ 
 
    } 
 
}
<div id="container"> 
 
    <div style="background: green">1</div> 
 
    <div style="background: blue">2</div> 
 
    <div style="background: red">3</div> 
 
</div>

至於替代,您可以採取的定位優勢:

* {margin:0;padding:0;box-sizing:border-box} 
 
html, body {width:100vw;height:100vh} /* viewport units */ 
 

 
#container { 
 
    position: relative; /* needs to be on the parent */ 
 
    height: 100%; 
 
    color: #fff; 
 
    font-size: 4em; 
 
    font-weight: bold; 
 
    text-align: center; 
 
} 
 

 
#container > div { 
 
    position: absolute; /* needs to be on the children */ 
 
} 
 

 
#container > div:first-child { 
 
    top: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 147.5px; /* -2.5px for the vertical gap */ 
 
} 
 

 
#container > div:nth-child(2) { 
 
    top: 0; 
 
    left: 0; 
 
    width: 50%; 
 
    height: 300px; 
 
} 
 

 
#container > div:nth-child(3) { /* can also use the :last-child */ 
 
    top: 152.5px; /* height of the :first-child + 5px */ 
 
    right: 0; 
 
    width: 50%; 
 
    height: 147.5px; /* -2.5px for the vertical gap */ 
 
} 
 

 
@media screen and (max-width: 568px) { 
 
    #container > div {position:static} 
 
    #container > div:first-child, 
 
    #container > div:nth-child(2), 
 
    #container > div:nth-child(3) { 
 
    width: 100%; 
 
    height: 150px; 
 
    } 
 
}
<div id="container"> 
 
    <div style="background: green">1</div> 
 
    <div style="background: blue">2</div> 
 
    <div style="background: red">3</div> 
 
</div>

+0

有_many_ dupe可供選擇:) – LGSon