html - Flex Layout、纵横比、固定宽度和动态宽度列

Question

我对页面布局有非常具体的要求，我似乎无法 100% 正确。

我的布局是这样的，我在每个部分都添加了数字，以便于解释:

我目前的尝试: https://jsfiddle.net/metheria/sxxbqtnb/71/embedded/result/

我最初的尝试是在填充一个虚拟 div 以创建纵横比之后，但这会在 div 下留下很多空白空间。我需要此布局不超过 100% 的宽度和高度，目前正在发生这种情况。

我目前尝试使用 flex 布局，但我什至无法将 5 合并到其中，因为我什至看不到 3、4 和 6 中的文本。我知道这很可能是由于“padding-bottom: 18%”，但是如果没有那个 padding，我什至看不到 div，更不用说可能保持宽高比的尝试了……

有没有办法将这些宽高比要求和完整布局结合起来？

此外，在 (1) 中，我想分成 4 个部分:- 一个图像- 中间的空间用于分隔图像和两个按钮- 两个按钮向左对齐

这引出了我的最后一个问题。我需要所有的 div 都是“display: flex;”吗？使这个布局工作或者导航栏不能是 flex？还有 map 。

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

由于整个过程都是为了填满屏幕，所以我们可以为具有固定比例的元素使用视口(viewport)单位。

然后我们可以在要占用剩余空间的元素上使用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 Demo