Flex布局，寬高比，固定寬度和動態寬度列

Question

我對頁面布局有非常具體的要求，我似乎無法100％正確。

我的布局是這樣的，我在每個部分添加了數字，以便於解釋：

而我目前對此的嘗試： https : //jsfiddle.net/metheria/sxxbqtnb/71/embedded/result/

我對它的嘗試最初是在填充一個虛擬div來創建寬高比之后進行的，但是在divs下卻留了很多空白。 我需要這種布局不要超過當前正在發生的寬度和高度的100％以上。

我目前的嘗試使用的是flex布局，但我什至無法在其中加入5，因為我什至看不到3、4和6中的文字。我知道它很可能是由“填充”引起的-bottom：18％”，但如果沒有填充，我什至看不到div，更不用說保持寬高比了。

無論如何，有沒有要結合這些長寬比要求和整個布局？

另外，在（1）中，我想分為4個部分：-圖像-中間的空間以分離圖像和兩個按鈕-兩個按鈕向左對齊

這使我想到了最后一個問題。 我是否需要所有的div為“ display：flex;”？ 使此布局有效，還是navbar不能靈活設置？ 以及地圖。

html代碼：

<div id="navbar">navbar</div>
<div id="map">mapa</div>
<div id="infos">
    <div class="test">
        <div class="test-wrap">
            <div id="multimedia"></div>
            <div id="ambassador"></div>
            <div id="next"></div>
        </div>
    </div>
    <div id="footer"> text </div>
</div>

和CSS代碼：

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

*, *:before, *:after {
  /* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
  -webkit-box-sizing: border-box; 

  /* Firefox (desktop or Android) 28- */
  -moz-box-sizing: border-box;

  /* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
  box-sizing: border-box;
}

#navbar {
    display: flex;
    background-color: pink;
    height: 54px;
    flex: 0 0 54px;
    width: 100%;
}

#map {
    width: 100%;
    height: 70%;
    background-color: blue;
}

#infos {
    height: 30%;
}

.test {
    position: relative;
    height: auto;
    background-color: transparent;
    display: flex;
}
.test-wrap {
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: 0;
    display: flex;
    /*justify-content: space-between;*/
    flex-wrap: wrap;
}
#next {
    position: relative;
    height: 100%;
    width: 15%;
    display: inline-flex;
    padding-bottom: 18%;
    background-color: #666;
}
#multimedia {
    position: relative;
    height: 100%;
    width: 25%;
    display: inline-flex;
    padding-bottom: 18%;
    background-color: #111;
}
#ambassador {
    position: relative;
    height: 100%;
    width: 60%;
    display: inline-flex;
    padding-bottom: 18%;
    background-color: #b92b2e;
}

#footer {
    display: inline-block;
    position: relative;
    height: 15px;
    flex: 0 0 15px;
    width: 100%;
    background-color: tomato;
}

Answer 1

由於整個過程都是填充屏幕，因此我們可以對要設置比例的元素使用視口單位。

然后，我們可以在要占用剩余空間的元素上使用flex:l 。

 * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; flex-direction: column; max-height: 100vh; height: 100vh; background: #c0ffee; } header { height: 54px; background: yellow; } main { flex: 1; background: blue; } aside { height: 30vh; background: #000; display: flex; } .left.image { /* 1:1 */ height: 30vh; width: 30vh; background: plum; } .left.video { /* 16:9 */ height: 30vh; width: calc(30vh *16 / 9); background: red; } .mid { flex: 1; background: green; display: flex; align-items: flex-start; } .asidefooter { height: 25px; background: #bada55; align-self: flex-end; width: 100%; } .right { height: 30vh; width: 15vh; background: grey; } footer { height: 15px; background: pink; } 

 <header></header> <main></main> <aside> <div class="left video"></div> <div class="mid"> <div class="asidefooter"></div> </div> <div class="right"></div> </aside><footer></footer> 

Codepen演示