0
私は行(13 * 13)と同じ量の列を持つテーブルを持っています。ウィンドウのサイズを変更すると、画面のアスペクト比に関係なく、セルの縦横比を維持しながら、セルの幅と高さを拡大するようにしたいと考えています。これはどうすればできますか?このうちアスペクト比を維持しながら、Flexで表のサイズを変更する方法は?
.result-test table{
width: 100%;
}
.result-test table tr{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
align-items: center;
background-color: red;
}
.result-test table td{
background-color: white;
user-select: none;
text-align:center;
vertical-align:middle;
height: 30px;
width: 30px;
font-weight: bold;
padding: 4px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
.result-test table td p{
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
}
チェック:http://stackoverflow.com私はFlexでこれを行ったhttp://i.imgur.com/FWzj5R8.jpg
:ここ
は、問題のスクリーンショットです/ questions/20456694/grid-of-responsive-squares/20457076#20457076 –ありがとうございました。 –