如何设置固定的高度和宽度（百分比：flex）？

Question

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

是否可以在没有display:table的情况下执行此操作并且只能弯曲？

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

＆＃13;

＆＃13;

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%;
    }

 

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是你想要的吗？

＆＃13;

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;