Aprenda o layout de CSS

flexbox

O novo modo de layout flexbox foi composto para redefinir como nós fazemos o layout em CSS. Infelizmente a especificação tem mudado muito recentemente, portanto é implementada de forma diferente nos diferentes browsers. Contudo, gostaria de partilhar um par de exemplos para poderes saber o que vêm ai. Estes exemplos actualmente funcionam apenas na implementação flexbox do Chrome, baseada na última versão do standard.

Existem por ai muitos recursos desactualizados sobre flexbox. Se queres aprender mais sobre flexbox, começa por aqui para aprender como identificar se um recurso é actual ou não. Eu escrevi um artigo detalhado utilizando a mais recente syntax.

Existe muito mais que podes fazer com flexbos; estes são apenas alguns exemplos para te dar uma ideia:

Layout simples utilizando Flexbox

.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}

Flexbox é tão fácil!

</section>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

</section>

</div>

Layout Decorado utilizando Flexbox

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

Vou ter 200px quando existe espaço, i vou encolher para 100px se não existir espaço, mas não menos.

</div>

Vou ter sempre 200px, independentemente do tamanho.

</div>

Vou encher até 1/3 da largura que restar.

</div>

Vou encher até 2/3 da largura que restar.

</div>

Centrar utilizando Flexbox

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

<div>

Finalmente, é fácil centrar verticalmente qualquer coisa em CSS!

</div>