0
我試圖創建與擴展器非常類似於Google圖像佈局的擴展器相同的「圖庫」,當您單擊該圖塊時擴展它。谷歌類型圖像庫佈局使用flexbox擴展部分
但是我試圖用flexbox做到這一點,但遇到了一個問題,我需要擴大部分的全屏寬度。問題在於它與兄弟姐妹一致。
我做了一個小提示,展示我試圖實現什麼,以及問題是什麼。
Fiddle of flexbox gallery layout
特此當前代碼佈局:
* {
padding: 0;
margin: 0;
outline: 0 none;
}
body {
font-size: 14px;
font-family: 'Open Sans';
}
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
display: flex;
flex-direction: column;
width: 20%;
}
.item-inner {
border: 1px solid #d2d2d2;
padding: .5em;
}
.item-expander {
background: #666;
color: white;
padding: 2em;
}
/* helpers*/
.hidden {
display: none;
visibility: hidden;
}
.visible {
display: flex;
visibility: visible;
}
<div class="wrapper">
<div class="header">
<h1>Header Section</h1>
</div>
<div class="content">
<div class="item">
<div class="item-inner">
<div class="item-header">header contnet</div>
<div class="item-body">body content</div>
</div>
<div class="item-expander hidden">content of expander</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-header">header contnet</div>
<div class="item-body">body content</div>
</div>
<div class="item-expander hidden">content of expander</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-header">header contnet</div>
<div class="item-body">body content</div>
</div>
<div class="item-expander hidden">content of expander</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-header">header contnet</div>
<div class="item-body">body content</div>
</div>
<div class="item-expander hidden">content of expander</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-header">header contnet</div>
<div class="item-body">body content</div>
</div>
<div class="item-expander hidden">content of expander</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-header">header contnet</div>
<div class="item-body">body content</div>
</div>
<div class="item-expander visible">content of expander</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-header">header contnet</div>
<div class="item-body">body content</div>
</div>
<div class="item-expander hidden">content of expander</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-header">header contnet</div>
<div class="item-body">body content</div>
</div>
<div class="item-expander hidden">content of expander</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-header">header contnet</div>
<div class="item-body">body content</div>
</div>
<div class="item-expander hidden">content of expander</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-header">header contnet</div>
<div class="item-body">body content</div>
</div>
<div class="item-expander hidden">content of expander</div>
</div>
<div class="item">
<div class="item-inner">
<div class="item-header">header contnet</div>
<div class="item-body">body content</div>
</div>
<div class="item-expander hidden">content of expander</div>
</div>
</div>
根本不是我想要的,你正在擴大該項目以100%爲好。他們需要保持瓦片視圖的x%「正如我在描述中所說的,與谷歌圖片搜索galery一樣」。但無論如何感謝 –