html - 如何以百分比设置固定高度和宽度(显示 : flex)?

Question

想要创建 2 列和多行矩形。这样做了，但后来我想制作响应式网格，将宽度和高度更改为例如 40% 和 20%，然后一切都出错了。如何以百分比而不是 px 设置固定宽度和高度以制作响应式网格？

是否可以在没有 display:table 的情况下仅使用 flex 或不使用 flex 来做到这一点？

还有一个问题。如果透视等于 600px，这个网格会响应吗？ 谢谢

html {
    height: 100%;
    max-height: 100%;
    font-family: "Merriweather", serif;
    letter-spacing: 0.01rem;
    font-size: 1.5rem;
    line-height: 1.75em;
    color: #3A4145;
    -webkit-font-feature-settings: 'kern' 1;
    -moz-font-feature-settings: 'kern' 1;
    -o-font-feature-settings: 'kern' 1;
    text-rendering: geometricPrecision;
    }

    .container {
      width: 40%;
      height: 40%;
      margin: 0 auto 60px;
      position: relative;
      -webkit-perspective: 600px;
         -moz-perspective: 600px;
           -o-perspective: 600px;
              perspective: 600px;
    }

    .container ul {
      width: 500px;
      height: 650px;
      opacity: 0.7;
      color: white;
      display: flex;
      flex-flow: wrap;
      align-content: stretch;
      margin: 0px;
      padding: 0px;
      -webkit-transform: rotateY( 5deg ) translate3d(0px,0px,1px);
         -moz-transform: rotateY( 5deg ) translate3d(0px,0px,1px);
           -o-transform: rotateY( 5deg ) translate3d(0px,0px,1px);
              transform: rotateY( 5deg ) translate3d(0px,0px,1px);
    }

    .container li {
      display: inline-block;
      position: relative;
      margin: 0;
      width: 50%;
      height: 20%;
      color: white;
      background: rgba(255, 0, 0, 0.7);
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      border: 1px solid white;
      transition: transform .33s, box-shadow .33s;

    }

    .container ul li a {
      display: block;
      height: 100%;
      text-decoration: none;
      color: inherit;
      padding-left: 3%;
    }

 

<h1>Flexbox rectangles</h1>
  <div class="container">
      <ul>
        <li><a href=""><span>Test</span></a></li>
        <li><a href=""><span>One</span></a></li>
        <li><a href=""><span>One</span></a></li>
        <li><a href=""><span>One</span></a></li>
        <li><a href=""><span>One</span></a></li>
        <li><a href=""><span>One</span></a></li>
        <li><a href=""><span>One</span></a></li>
        <li><a href=""><span>One</span></a></li>
        <li><a href=""><span>One</span></a></li>
        <li><a href=""><span>One</span></a></li>

      </ul>
  </div>

Answer 1

这是你想要的吗？？

html {
	height: 100%;
	max-height: 100%;
	font-family: "Merriweather", serif;
	letter-spacing: 0.01rem;
	font-size: 1.5rem;
	line-height: 1.75em;
	color: #3A4145;
	-webkit-font-feature-settings: 'kern' 1;
	-moz-font-feature-settings: 'kern' 1;
	-o-font-feature-settings: 'kern' 1;
	text-rendering: geometricPrecision;
}
.container {
	width: 40%;
	min-width: 320px;
	height: 40%;
	margin: 0 auto 60px;
	position: relative;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	-o-perspective: 600px;
	perspective: 600px;
}
.container ul {
	width: 100%;
	height: 650px;
	opacity: 0.7;
	color: white;
	display: flex;
	flex-flow: wrap;
	align-content: stretch;
	margin: 0px;
	padding: 0px;
	-webkit-transform: rotateY( 5deg ) translate3d(0px, 0px, 1px);
	-moz-transform: rotateY( 5deg ) translate3d(0px, 0px, 1px);
	-o-transform: rotateY( 5deg ) translate3d(0px, 0px, 1px);
	transform: rotateY( 5deg ) translate3d(0px, 0px, 1px);
}
.container li {
	display: inline-block;
	position: relative;
	margin: 0;
	width: 50%;
	height: 20%;
	color: white;
	background: rgba(255, 0, 0, 0.7);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid white;
	transition: transform .33s, box-shadow .33s;
}
.container ul li a {
	display: block;
	height: 100%;
	text-decoration: none;
	color: inherit;
	padding-left: 3%;
}

<div class="container">
    <ul>
        <li><a href=""><span>Test</span></a></li>
        <li><a href=""><span>One</span></a></li>
        <li><a href=""><span>One</span></a></li>
        <li><a href=""><span>One</span></a></li>
        <li><a href=""><span>One</span></a></li>
        <li><a href=""><span>One</span></a></li>
        <li><a href=""><span>One</span></a></li>
        <li><a href=""><span>One</span></a></li>
        <li><a href=""><span>One</span></a></li>
        <li><a href=""><span>One</span></a></li>
    </ul>
</div>