4

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 :/

inserir a descrição da imagem aqui

6
  • Por que teria que usar o display: flex?
    – Sam
    Commented 13/09/2017 às 17:17
  • 1
    Eu sei que não é bem uma resposta, mas da uma olhada nisso bulma.io/documentation/layout/tiles Commented 13/09/2017 às 17:25
  • @Dvdsamm, para aprender a realizar isso com o display flex, visto que já sei realizar isso com float Commented 13/09/2017 às 17:31
  • Já usou o GRID? Dá uma olhada neste Fiddle: jsfiddle.net/xe468gz8
    – Sam
    Commented 13/09/2017 às 17:44
  • @Dvdsamm formula uma resposta com este exemplo, ficou muito bom.
    – Syzoth
    Commented 14/09/2017 às 21:19

2 Respostas 2

5
+50

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ôs
  • flex-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 afetadas
  • col muda a orientação dos filhos

Se 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>

2
  • 1
    só da pra pagar em 23 horas, assim que liberar eu dou a rep Commented 13/09/2017 às 17:32
  • 1
    @MuriloGambôa nem precisa se preocupar, eu gosto muito de perguntas de CSS, se tivesse visto antes da recompensa eu teria respondido. PS: vou começar a seguir o Feed da tag CSS pt.stackoverflow.com/feeds/tag?tagnames=css&sort=newest :D
    – Syzoth
    Commented 13/09/2017 às 17:33
1

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>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .