谷歌类型图像库布局使用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>