Question

我希望我的页面分为三部分（div）。

中间div必须是正方形并占用所有可用空间。

侧面div必须在左右或上下均等地留出剩余空间，与其内容无关。

我一直使用flex 宽度：100vmin 身高：100vmin

但我必须在窗口调整大小事件处理程序中更改flex-direction。

没有JavaScript可以做到吗？

// Set the flex direction according to current size
var flexRow = (window.innerWidth >= window.innerHeight);
document.getElementById("main").style.flexDirection = flexRow ? "row" : "column";

// Change the flex direction on window resize
window.addEventListener(
	"resize",
	function() {
		if (flexRow != (window.innerWidth >= window.innerHeight)) {
			flexRow = !flexRow;
			document.getElementById("main").style.flexDirection = flexRow ? "row" : "column";
		}
	}
);

body {
	margin: 0;
	overflow: hidden;
}

#main {
	position: absolute;
	display: flex;
	width: 100%;
	height: 100%;
    background-color: yellow;
}

.pan-side {
	background-color: #999999;
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	padding: 1%;
}

#pan-main {
	width: 100vmin;
	height: 100vmin;
    background-color: blue;
}

<body>
	<div id="main">
		<div id="pan-side1" class="pan-side"></div>
		<div id="pan-main"></div>
		<div id="pan-side2" class="pan-side">
		</div>
	</div>
</body>

Answer 1

您可以使用以下媒体查询：

{
  modules: {
    api: {
      modules: {
        products: /* ... */
      }
    },
    components: {
      modules: {
        page: /* ... */
      }
    }
  }
}

请参阅JSFiddle

Answer 2

喜欢这个吗？

var el = document.querySelector('.main');
if(el.scrollHeight< window.innerHeight){  document.querySelector('.container').style.flexDirection = "column"
}

.container{
  width:100%;
  display:flex;
  justify-content:center;
}
.main{
  background-color:blue;
  width:100vmin; 
  height: 100vmin;
}

<div class="container">
  <div class="alt"></div>
  <div class="main"></div>
  <div class="alt"></div>
</div>

最大化和居中的方形div

2 个答案: