强制 flexbox div 缩小以使所有元素都适合屏幕答案

【问题标题】：Force flexbox divs to shrink to keep all elements fit in screen强制 flexbox div 缩小以使所有元素都适合屏幕
【发布时间】：2017-07-02 05:09:13
【问题描述】：

我有一个画布元素，我想成为一个正方形 - 宽度设置为等于高度。

这很好用，但是当我在显示器上尽可能扩大窗口高度时，宽度的相应增长会将同级画布元素推离屏幕并出现水平滚动条。

我想在动态调整其他画布大小的同时保持对这个中心画布的大小控制——如果它们离开屏幕，则缩小。

<html>
<center>
<body bgcolor="#4c5959">
<link rel="stylesheet" href="style.css">
<center>
<div class="container">
<canvas id="info" class="panel"></canvas>
<canvas id="board" class="panel"></canvas>
<canvas id="actions" class="panel"></canvas>
</div>

let board = document.getElementById("board");
function resize() {

  var height = window.innerHeight;

  var ratio = board.width/board.height;
  board.width = height;
  board.height = height;
  board.style.width = height+'px';
  board.style.height = height+'px';

  window.display.w = height;;
  window.display.h = height;
}

window.addEventListener('load', resize, false);
window.addEventListener('resize', resize, false);
</script>

.container {
  display:flex;
  height:100%;
  width:100%;
}

.panel {
  display:flex;
}

#board {
  width:50%;
  height:100%;
  background:#9b59b6;
}

#info {
  width:25%;
  height:100%;
  background:#3498db;
}

#actions {
  width:25%; 
  height:100%;
  background:#1abc9c;
}

我怎样才能做到这一点？我尝试在外部容器中使用flex-basis, flex-growth, display:inline-flex，但没有结果。

【问题讨论】：

可能重复：stackoverflow.com/q/36247140/3597276

标签： javascript html css flexbox

【解决方案1】：

这就是你要找的吗？

let board = document.getElementById("board");
function resize() {

  var height = window.innerHeight;

  var ratio = 1;
  board.width = height;
  board.height = height;
  board.style.width = height+'px';
  board.style.height = height+'px';

}

window.addEventListener('load', resize, false);
window.addEventListener('resize', resize, false);

body {
  background-color: #4c5959;
  margin: 0;
}
*{
  box-sizing: border-box;
}
.container {
  display:flex;
  height:100vh;
  width:100vw;
}

.side {
  flex: 1 1 25%;
  width: 25%;
}
.side canvas {
  height: 100vh;
  width: 100%;
  float: left;
}

#board {
  background:#9b59b6;
  width: 50vw;
  height: 100%;
}

#info {
  background:#3498db;
}

#actions {
  background:#1abc9c;
}

<div class="container">
  <div class="side">
    <canvas id="info"></canvas>
  </div>
  <canvas id="board"></canvas>
  <div class="side">
    <canvas id="actions"></canvas>
  </div>
</div>

【讨论】：

好的，谢谢！中心画布保持其宽度等于高度，边适当缩放
如果它变得很窄，它仍然会得到一个水平条，但这是因为你保持它是正方形的。你可以使用ratio 媒体查询来解决这个问题（使 flex 去列并且仍然保持中间部分为正方形。
flex 1 1 25% 到底在做什么？
我是flex-grow: 1; flex-shrink: 1; flex-basis: 25%;
如果你问我，画布很奇怪。我最近和他们玩了很多（深入研究d3）。到目前为止，我发现响应式画布的最佳解决方案是从头开始重新绘制它们。如果它们太复杂，我只会淡出内容并等待调整大小完成，直到我重绘。但是，实际上，响应式画布并不存在 :)