Question

我正在使用flexbox来组织div，x y的矩形已经在另一个flexbox中，这也在另一个flexbox中...等等。我必须在x; y矩形内放入其他三个div，它们的组织方式如下：

这就是为什么我需要一种方法来检索父级的高度（y），以便将此值分配给我的中间div的宽度，使其成为以（x; y）矩形为中心的正方形。

我知道有一种方法可以在运行时进行计算（calc），但是也许我缺少了一些东西，并且有一种更简单的方法可以在其中执行我想做的事情。

编辑：我认为我是this的副本

EDIT2：并不是真正的重复，因为上面的主题使用的是父容器的px宽度，而我使用的是100％。您可以在评论部分找到我的jsffidle。

Answer 1

您可以按百分比设置子div的宽度和高度，或者也可以将css变量与“ calc”一起使用。

<html>
<head>
<style>

:root {
  --y: 300px;
  --x: 500px;
}

.flex-container {
  width: var(--x);
  height: var(--y);
  display: flex;
  flex-wrap: nowrap;  
}

.first {
  background-color: green;
  width:calc(var(--x)/2 - var(--y)/2);
}

.middle {
  background-color: orange;
  width:var(--y);
}

.last {
  background-color: green;
  width:calc(var(--x)/2 - var(--y)/2);
}

.flex-container > div {    
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  height: 100%;  
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="first"></div>
  <div class="middle"></div>
  <div class="last"></div>  
</div>

</body>
</html>

Answer 2

希望有帮助

.wrapper{
  
  width: 800px;
  height: 800px;
}

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

.item1{
  
  background-color: red;
  flex: 1;
}

.item2{
  
  background-color: yellow;
  flex: 2;
}

.item3{
  
  background-color: red;
  flex: 1;
}

<div class="wrapper">
  <div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
  </div>
</div>

将子div的宽度绑定到父div的高度

2 个答案: