Bom, estou tentando criar uma galeria,no modelo logo abaixo, porém, preciso utilizar o display:flex
, como posso realizar isso?
- Pensei em usar o float, mas lembrei que o display flex ignora qualquer float :/
Um exemplo bem simples é criar um "div pai":
/*o BODY no doctype HTML5 ou Strict não ocupa 100%, então isso deve ajustar*/
html, body {
height: 100%;
}
.flex-parent {
display: -webkit-flex;
display: flex;
width: 100%;
height: 100%;
}
.col {
-webkit-flex-direction: column; /* Safari 6.1+ */
flex-direction: column;
}
.flex-child {
width: 100%;
height: 100%;
background-color: #c0c0c0;
margin: 2px;
}
<div class="flex-parent col">
<div class="flex-parent">
<div class="flex-parent">
<div class="flex-child">Filho 0</div>
</div>
<div class="flex-parent col">
<div class="flex-child">Filho 1</div>
<div class="flex-child">Filho 2</div>
</div>
</div>
<div class="flex-parent">
<div class="flex-child">Filho 1</div>
<div class="flex-child">Filho 2</div>
<div class="flex-child">Filho 3</div>
</div>
</div>
flex-parent
é classe responsável por criar pais e avôsflex-child
é para ocupar 100% do espaço (pode ser substituído e pode ser opcional, ou seja os filhos podem variar de tamanho), no entanto talvez seja melhor usar ela para evitar que a orientação de botões e formulários ou outras coisas dentro do flex sejam afetadascol
muda a orientação dos filhosSe tem alguma preocupação com navegadores mais antigos, como alguns mobile por exemplo, pode experimentar usando float: ...;
e ajustando a porcentagem da largura e altura conforme necessário, um exemplo:
/*
o BODY no doctype HTML5 ou Strict não ocupa 100%, então isso deve ajustar
A margem afeta os elementos filhos, então neste caso é melhor remover
*/
html, body {
margin: 0;
height: 100%;
}
.top, .child, .bottom, .v-block, .big-block {
box-sizing: border-box;
}
.main {
width: 100%;
height: 100%;
}
.top {
width: 100%;
height: 66.6665%;
}
.bottom {
width: 100%;
height: 33.3332%;
}
.big-block {
width: 66.6665%;
height: 100%;
float: left;
}
.v-block {
float: left;
width: 33.3332%;
height: 100%;
}
.child {
background-color: #c0c0c0;
width: 100%;
height: 100%;
/*sombra só pra identificar o childs*/
box-shadow: inset 0 0 2px 2px rgba(0,0,0,.26);
}
.v-block > .child {
height: 50%;
}
.bottom > .child {
float: left;
width: 33.3332%;
height: 100%;
}
<div class="main">
<div class="top">
<div class="big-block">
<div class="child">Filho 0</div>
</div>
<div class="v-block">
<div class="child">Filho 1</div>
<div class="child">Filho 2</div>
</div>
</div>
<div class="bottom">
<div class="child">Filho 3</div>
<div class="child">Filho 4</div>
<div class="child">Filho 5</div>
</div>
</div>
Você pode usar o CSS GRID que se auto-ajusta à largura da div
:
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
background-color: #fff;
color: #444;
grid-auto-rows: minmax(150px, auto);
}
.box {
background-color: #444;
color: #fff;
padding: 20px;
font-size: 150%;
}
.box.a{
grid-column-start: 1;
grid-column-end: 3;
grid-row-end:span 2;
}
<div style="display: block; width: 100%;">
<div class="wrapper">
<div class="box a">a</div>
<div class="box b">b</div>
<div class="box c">c</div>
<div class="box d">d</div>
<div class="box e">e</div>
<div class="box f">f</div>
</div>
</div>
display: flex
?