如何按比例縮放此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瓷磚網格

回答

相關問題