0
我有一个表,它有相同数量的列作为行(13 * 13)。我想这样做是为了在调整窗口大小时,单元格的宽度和高度应该缩放,同时保持单元格的纵横比,而与屏幕纵横比无关。这怎么能做到?在Flex中调整表的大小,同时保持宽高比,如何?
这是问题的一个截屏:http://i.imgur.com/FWzj5R8.jpg
我已经在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/questions/20456694/grid-of-responsive-squares/20457076#20457076 –
谢谢,它看起来不错。 –