谷歌類型圖像庫佈局使用flexbox擴展部分

Question

我試圖創建與擴展器非常類似於Google圖像佈局的擴展器相同的「圖庫」，當您單擊該圖塊時擴展它。

但是我試圖用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>

Answer 1

使用flex: 1 100%;，使其整個寬度。希望這會幫助你。

* { 
 
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 { 
 
flex: 1 100%; 
 
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>