Question

我正在进行模块化的行/列布局，行中列的行的变量组合等。我正在使用 flex 属性使这些元素很好地适合页面。

CSS：

.row {
    display: flex;
}
.column {
    display: flex;
    flex-direction: column;
    flex: 1;
}

Here is a fiddle showing the effect I'm going for。请注意，列的大小与其内容成比例。

但是，我也在使用 canvas 元素，为了实现多个绘图层，我将它们堆叠起来：

CSS：

.canvasarea {
    position: relative;
}
.canvasarea canvas {
    position: absolute;
}

Here's a fiddle showing this effect

但是，当我尝试将这些效果结合起来时，我会得到this unexpected result (fiddle)。现在，无论子元素如何，它都将列宽设置为屏幕的50％。

我已经尝试了我能找到的每个 flex 和位置选项，但似乎无法将这两个效果放在一起。这可能是这样做的，还是我通过使用 relative 来打破 flex ？我很感激任何提示，我还是CSS的新手。

Answer 1

将flex: 1设置为.canvasarea以适合flex容器中的可用空间，并将max-width: 100%设置为canvas元素以防止溢出：

＆＃13;

var canvas1b = document.getElementById("cvs1back");
canvas1b.height = 400;
canvas1b.width = 400;
var ctx1b = canvas1b.getContext("2d");
ctx1b.fillStyle = "red";
ctx1b.fillRect(0, 0, canvas1b.width, canvas1b.height);

var canvas1f = document.getElementById("cvs1front");
canvas1f.height = 400;
canvas1f.width = 400;
var ctx1f = canvas1f.getContext("2d");
ctx1f.beginPath();
ctx1f.moveTo(0, 0);
ctx1f.lineTo(0, 0);
ctx1f.stroke();

var canvas2b = document.getElementById("cvs2back");
canvas2b.height = 400;
canvas2b.width = 400;
var ctx2b = canvas2b.getContext("2d");
ctx2b.fillStyle = "blue";
ctx2b.fillRect(0, 0, canvas2b.width, canvas2b.height);

var canvas2f = document.getElementById("cvs2front");
canvas2f.height = 400;
canvas2f.width = 400;
var ctx2f = canvas2f.getContext("2d");

＆＃13;

.row {
  display: flex;
}

.column {
  flex: 1;
}

.canvasarea {
  position: relative;
  flex: 1;
}

.canvasarea canvas {
  position: absolute;
  max-width: 100%;
}

span {
  background: yellow;
}

＆＃13;

<div class="row">
  <span>Some text</span>
</div>
<div class="row">
  <div class="column">
    <div class="canvasarea">
      <canvas id="cvs1back"></canvas>
      <canvas id="cvs1front"></canvas>
    </div>
  </div>
  <div class="column">
    <div class="row">
      <span>Some other text</span>
    </div>
    <div class="row">
      <div class="canvasarea">
        <canvas id="cvs2back"></canvas>
        <canvas id="cvs2front"></canvas>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我发现将min-width设置为最宽元素的宽度（在本例中为我的画布）achieved the desired effect。

HTML：

<div class="row">
  <span>Some text</span>
</div>
<div class="row">
  <div class="column">
    <div class="row">
      <div style="min-width:300px" class ="canvasarea">
        <canvas id="cvs1back"></canvas>
        <canvas id="cvs1front"></canvas>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="row">
      <span>Some other text</span>
    </div>
    <div class="row">
      <div style="min-width:100px" class ="canvasarea">
        <canvas id="cvs2back"></canvas>
        <canvas id="cvs2front"></canvas>
      </div>
    </div>
  </div>
</div>

CSS：

.row {
    display: flex;
    flex-direction: row;
}
.column {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.canvasarea {
  position: relative;
}
.canvasarea canvas {
  position: absolute;
}

JS：

var canvas1size = 300;
var canvas1b = document.getElementById("cvs1back");
canvas1b.height = canvas1size;
canvas1b.width = canvas1size;
var ctx1b = canvas1b.getContext("2d");
ctx1b.fillStyle = "red";
ctx1b.fillRect(0, 0, canvas1b.width, canvas1b.height);

var canvas1f = document.getElementById("cvs1front");
canvas1f.height = canvas1size;
canvas1f.width = canvas1size;
var ctx1f = canvas1f.getContext("2d");
ctx1f.beginPath();
ctx1f.strokeStyle = "black";
ctx1f.moveTo(canvas1size,0);
ctx1f.lineTo(0,canvas1size);
ctx1f.stroke();

canvas2size = 100;
var canvas2b = document.getElementById("cvs2back");
canvas2b.height = canvas2size;
canvas2b.width = canvas2size;
var ctx2b = canvas2b.getContext("2d");
ctx2b.fillStyle = "gray";
ctx2b.fillRect(0, 0, canvas2b.width, canvas2b.height);

var canvas2f = document.getElementById("cvs2front");
canvas2f.height = canvas2size;
canvas2f.width = canvas2size;
var ctx2f = canvas2f.getContext("2d");
ctx2f.beginPath();
ctx2f.strokeStyle = "black";
ctx2f.moveTo(0,0);
ctx2f.lineTo(canvas2size,canvas2size);
ctx2f.stroke();

Working fiddle

可以在flexboxes中使用相对定位吗？

2 个答案: