Question

我计划根据用户输入进行网格布局。例如，如果用户输入值“ 3”，则像Tic-Tac-Toc游戏布局一样在页面上动态放置3 x 3平方。我认为flexbox是个好方法。但是，根据输入值，每个像元的宽度和高度将有所不同。我听说通过设置.px进行尺寸控制不是理想的方法。我研究了很多示例，但是还找不到动态布局示例。您对此问题有何建议？

我尝试过的方法如下。在这里，我使用了引导程序，但是我意识到我不需要使用它，因为gridcss或flexbox已经提供了该功能。无论如何，在制作html字符串之后，我将它们放入了容器中，但是正如您所期望的，高度远小于宽度。我想做的是自己调整宽度和高度，这是个好方法吗？我不想直接设置px值。

     <uib-accordion close-others='oneAtATime' class='tawji-custom-accordian'>
     <div uib-accordion-group class='abcd' is-open='true'>
     <uib-accordion-heading>
  <ui-collapsible-panel-header><div class=' flex-container tawji-request-body'>
   <div class='h-inherit flex-container header-icon'>
     <img src='img/sprites/Study.svg#Requests-Brown-View'>
     <span clas='sub-title'>Request</span>
   </div>

   <div class='flex-container v-align-c justify-between overall-details'>

     <div class='flex-container v-align-c justify-between'>
       <img src='img/sprites/Study.svg#Approve-Green-View'>
       <div class='ui-control'>
         <label></label>
         <span class='value-label'>{{}}</span>
       </div>
     </div>
     <div class='flex-container v-align-c justify-between'>
       <img src='img/sprites/Study.svg#Reject-Red-View'>
       <div class='ui-control'>
         <label></label>
         <span class='value-label'>{{}}</span>
       </div>
     </div>
     <div class='flex-container v-align-c justify-between'>
       <img src='img/sprites/Study.svg#Inprogress-Brown-View'>
       <div class='ui-control'>
         <label></label>
         <span class='value-label'>{{}}</span>
       </div>
     </div>
   </div>
 </div></ui-collapsible-panel-header>
 <ui-colasible-panel-body></ui-colasible-panel-body>
  </uib-accordion-heading>
  </div>
  </uib-accordion>

Answer 1

这里的部分问题是在游戏板上创建纵横比为1：1的单元。

为此，您可以使用一个漂亮的CSS技巧，将单元格嵌入具有padding-top: 100%;的另一个div中。

padding-top相对于父元素的width，因此，值为100%时，长宽比将始终为1：1

Working jsFiddle example

使用flexbox进行动态网格布局

1 个答案: