如何按比例缩放此flexbox瓷砖网格

我正在准备我的网站使用flexbox一些瓷砖的英雄元素。英雄元素有一些变体，配置是灵活的：嵌套瓷砖，我可以获得我需要的变体。这是一个变体，我不明白为什么当我调整浏览器右侧的图像，垂直方块时，失去了比例。我怎样才能按比例调整整个网格？而btw为什么我可以消除元素之间的蓝色差距？这与righe瓷砖的高度有关。如何按比例缩放此flexbox瓷砖网格

下面是HTML

<div class="cover"> 
    <div class="tile is-ancestor"> 
    <div class="tile is-vertical is-2"> 
     <div class="tile is-child"> 
     <img src="https://s1.postimg.org/ga0s55bxr/cover1.jpg" /> 
     </div> 
     <div class="tile is-child"> 
     <img src="https://s8.postimg.org/xnsnrs4x1/cover2.jpg" /> 
     </div> 
    </div> 
    <div class="tile"> 
     <img src="https://s1.postimg.org/n35qf5s4v/cover3.jpg" /> 
    </div> 
    </div> 
</div>

这里编译CSS

.cover { 
    max-width: 1080px; 
    background-color: blue; 
    margin: 0; 
} 
@media screen and (min-width: 1351px) { 
    .cover { 
    max-width: 1350px; 
    margin: 0 -135px; 
    } 
} 
.cover .tile { 
    align-items: stretch; 
    display: block; 
    flex-basis: 0; 
    flex-grow: 1; 
    flex-shrink: 1; 
    min-height: min-content; 
} 
.cover .tile.is-child { 
    margin: 0 !important; 
} 
.cover .tile.is-vertical { 
    flex-direction: column; 
} 
@media screen and (min-width: 769px) { 
    .cover .tile:not(.is-child) { 
    display: flex; 
    } 
    .cover .tile.is-1 { 
    flex: none; 
    width: 33.33333%; 
    } 
    .cover .tile.is-2 { 
    flex: none; 
    width: 66.66667%; 
    } 
    .cover .tile.is-3 { 
    flex: none; 
    width: 100%; 
    } 
}

我也创建了codepen

来源

2017-06-04 Roberto Pezzali

对于.tile，您必须指定显示器：flex – Gerard

要删除蓝色缝隙，请在'img'元素中添加'vertical-align：bottom'。 https://stackoverflow.com/a/31445364/3597276 –

@Gerard我已经尝试，但图像失去他们的长宽比... –

这是我应该怎样使这一切发生..

您只需定义IMG的宽度并确保更改flex方向。

一切都可以flexboxed ..

在你的情况下，它是IMG，所以你需要从IMG

.container { 
    display:flex; 

    } 

    .container_left {display: flex; 
         flex: 1; 
         flex-direction:column} 

    .left { 
     flex:2; 
     display: flex; 
     align-items: stretch; 
      } 

.left img {max-width: 100%} 
.right img {max-width: 100%} 

    .right { 
     flex:1; 
    } 

@media (max-width:768px) { 
    .container{ 
     flex-direction: column 


    } 
}

我用。你可以把它应用到HTML上述弯曲你的一个代码..

<div class="container"> 

    <div class="container_left"> 
      <div class="left"><img src="https://s1.postimg.org/ga0s55bxr/cover1.jpg" /></div> 
      <div class="left"> <img src="https://s8.postimg.org/xnsnrs4x1/cover2.jpg" /></div> 
     </div> 

     <div class="right"> <img src="https://s1.postimg.org/n35qf5s4v/cover3.jpg" /></div> 



    </div>

这是在codepen你

https://codepen.io/maffas/pen/zzxMxO

来源

2017-06-05 23:36:10 johnashu

如何按比例缩放此flexbox瓷砖网格

回答

相关问题