Flexbox内的响应式地铁块

时间:2013-06-02 20:40:52

标签: css3 layout microsoft-metro responsive-design flexbox

你如何在flexbox中包含地铁外观块,以保持响应?

这是我到目前为止(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个地铁外观按钮(左侧2个,右侧2个),中间带有图标,左下角有标题,就像它在Windows 8地铁外观一样< / p>

你如何从这里开始制作那些地铁看块?

0 个答案:

没有答案