1

您如何在 flexbox 中包含 Metro Look 块，以保持响应？

这就是我到目前为止所拥有的（html）：

    `<div id='main22'>
     <middle22>Middle section with a picture</middle22>
     <left22>Left side (metro look blocks)</left22>
     <right22>Right side (metro look blocks)</right22>
     </div>`

那么这将是css部分：

    `#main22 {
     min-height: auto;
     margin: 0px;
     padding: 0px;
     display: -webkit-flex;
     display:         flex;
     -webkit-flex-flow: row;
       flex-flow: row;
     }

     #main22 > middle22 {
     margin: 2px;
     padding: 3px;
     background: #aaaaaa;
     -webkit-flex: 3 1 30%;
       flex: 3 1 30%;
     -webkit-order: 2;
       order: 2;
     }

     #main22 > left22 {
     margin: 2px;
     padding: 3px;
     background: #bbbbbb;
     -webkit-flex: 1 6 30%;
       flex: 1 6 30%;
     -webkit-order: 1;
       order: 1;
     }

     #main22 > right22 {
     margin: 2px;
     padding: 3px;

     background: #cccccc;
     -webkit-flex: 1 6 30%;
       flex: 1 6 30%;
     -webkit-order: 3;
       order: 3;
     }

     @media all and (max-width: 640px) {

     #main22 {
     -webkit-flex-flow: column;
        flex-flow: column;
      }

     #main22 > middle22, #main22 > left22, #main22 > right22 {
     -webkit-order: 0;
        order: 0;
     }

     #main22 > left22, #main22 > right22 {
     min-height: 50px;
     max-height: auto;
     }
     }`

到目前为止，它在所有设备上都运行良好，中间部分在台式机和更大的平板电脑上应该在中间，在智能手机上应该在顶部。我想在里面有一个图像（居中）。在左右部分，我想要 4 个 Metro 外观按钮（左侧 2 个，右侧 2 个），中间有图标，左下角有标题，就像在 Windows 8 Metro Look 中一样

你会如何从这里开始让那些地铁看起来像街区？

4

0 回答 0