css - tableless - webkit flex basis




Melhor maneira de definir a distância entre os itens flexbox (20)

Para definir a distância mínima entre os itens do flexbox, estou usando margin: 0 5px em .item e margin: 0 -5px no container. Para mim, parece um hack, mas não consigo encontrar uma maneira melhor de fazer isso.

Example

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>


Columnify - Uma classe de solo para N colunas

Flexbox e SCSS

.columnify {
  display: flex;

  > * {
    flex: 1;

    &:not(:first-child) {
      margin-left: 2rem;
    }
  }
}

Flexbox e CSS

.columnify {
  display: flex;
}

.columnify > * {
  flex: 1;
}

.columnify > *:not(:first-child) {
  margin-left: 2rem;
}
<div class="columnify">
  <div style="display: inline-block; height: 20px; background-color: blue;"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
</div>

Jogue com ele no JSFiddle .


flexbox e css calc ()

Olá, abaixo está a minha solução de trabalho para todos os navegadores que suportam o flexbox. Sem margens negativas, sem hacks, sem soluções, CSS puro.

Fiddle Demo

   
.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flexbox > div {
  /*
    1/3  - 3 columns per row
    10px - spacing between columns 
  */
  box-sizing: border-box;
  margin-bottom: 10px;
  width: calc(1/3*100% - (1 - 1/3)*10px);
}
<div class="flexbox">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>


Aqui está a minha solução, que não requer a configuração de nenhuma classe nos elementos filhos:

.flex-inline-row {
    display: inline-flex;
    flex-direction: row;
}

.flex-inline-row.flex-spacing-4px > :not(:last-child) {
    margin-right: 4px;
}

Uso:

<div class="flex-inline-row flex-spacing-4px">
  <span>Testing</span>
  <span>123</span>
</div>

A mesma técnica pode ser usada para linhas e colunas flexíveis normais, além do exemplo em linha fornecido acima, e estendida com classes para espaçamento diferente de 4px.


Aqui está uma grade de elementos de interface do usuário com espaçamento preenchido usando a caixa flexível:

Eu estava frustrado com o espaçamento manual dos cartões, manipulando padding e margens com resultados duvidosos. Então aqui estão as combinações de atributos CSS que eu achei muito eficazes:

.card-container {
  width: 100%;
  height: 900px;
  overflow-y: scroll;
  max-width: inherit;
  background-color: #ffffff;
  
  /*Here's the relevant flexbox stuff*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap; 
}

/*Supplementary styles for .card element*/
.card {
  width: 120px;
  height: 120px;
  background-color: #ffeb3b;
  border-radius: 3px;
  margin: 20px 10px 20px 10px;
}
<section class="card-container">
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
      </section>

Espero que isso ajude as pessoas, presente e futuro.


Com o flexbox, a criação de calhas é um problema, especialmente quando o envolvimento está envolvido.

Você precisa usar margens negativas ( como mostrado na pergunta ):

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

... ou altere o HTML ( conforme mostrado em outra resposta ):

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
            ...
  </div>
</div>

... ou alguma outra coisa.

Em qualquer caso, você precisa de um hack feio para fazê-lo funcionar porque o flexbox não oferece um recurso de " flex-gap " ( pelo menos por enquanto ).

A questão das calhas, no entanto, é simples e fácil com o CSS Grid Layout.

A especificação de grade fornece propriedades que criam espaço entre itens de grade, ignorando o espaço entre itens e o contêiner. Essas propriedades são:

  • grid-column-gap
  • grid-row-gap
  • grid-gap (a abreviação para ambas as propriedades acima)

Recentemente, a especificação foi atualizada para estar em conformidade com o Módulo de Alinhamento de Caixa CSS , que fornece um conjunto de propriedades de alinhamento para uso em todos os modelos de caixa. Então as propriedades são agora:

  • column-gap
  • row-gap
  • gap (taquigrafia)

No entanto, nem todos os navegadores compatíveis com o Grid suportam as propriedades mais recentes, portanto, usarei as versões originais na demonstração abaixo.

Além disso, se o espaçamento for necessário entre os itens e o contêiner, o padding no contêiner funcionará bem (consulte o terceiro exemplo na demonstração abaixo).

A partir da especificação:

10.1. Calhas: as propriedades row-gap column-gap e gap

As propriedades row-gap column-gap (e sua gap abreviada), quando especificadas em um contêiner de grade, definem as calhas entre linhas de grade e colunas de grade. Sua sintaxe é definida em CSS Box Alignment 3 §8 Gaps Between Boxes .

O efeito dessas propriedades é como se as linhas de grade afetadas adquirissem espessura: a trilha de grade entre duas linhas de grade é o espaço entre as calhas que as representam.

.box {
  display: inline-grid;
  grid-auto-rows: 50px;
  grid-template-columns: repeat(4, 50px);
  border: 1px solid black;
}

.one {
  grid-column-gap: 5px;
}

.two {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.three {
  grid-gap: 10px;
  padding: 10px;
}

.item {
  background: lightgray;
}
<div class='box one'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box two'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box three'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Mais Informações:


Continuando a partir da resposta de sawa, aqui está uma versão ligeiramente melhorada que permite que você defina um espaçamento fixo entre os itens sem a margem circundante.

http://jsfiddle.net/chris00/s52wmgtq/49/

Também está incluída a versão do Safari "-webkit-flex".

.outer1 {
    background-color: orange;
    padding: 10px;
}

.outer0 {
    background-color: green;
    overflow: hidden;
}

.container
{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;    
    -webkit-flex-wrap: wrap;
    background-color: rgba(0, 0, 255, 0.5);
    margin-left: -10px;
    margin-top: -10px;
}

.item
{
    flex-grow: 1;
    -webkit-flex-grow: 1;
    background-color: rgba(255, 0, 0, 0.5);
    width: 100px;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    color: white;
}

<div class="outer1">
    <div class="outer0">
        <div class="container">
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
        </div>
    </div>
</div>

Ele não funcionará em todos os casos, mas se você tiver larguras filho flexíveis (%) e souber o número de itens por linha, você pode especificar muito claramente as margens dos elementos necessários usando nth-child seletor nth-child / s.

Depende em grande parte do que você entende por "melhor". Dessa forma, não é necessária uma marcação adicional de wrapper para elementos filhos ou elementos negativos, mas essas coisas têm seu lugar.

section {
  display: block
  width: 100vw;
}
.container {
  align-content: flex-start;
  align-items: stretch;
  background-color: #ccc;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  width: 100%;
}

.child-item {
  background-color: #c00;
  margin-bottom: 2%;
  min-height: 5em;
  width: 32%;
}

.child-item:nth-child(3n-1) {
  margin-left: 2%;
  margin-right: 2%;
}
<html>
  <body>
      <div class="container">
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
      </div>
   </body>
</html>


Eu acho que a maneira mais fácil de fazer isso é com porcentagens e apenas permitindo que a margem calcule sua largura

Isso significa que você acaba com algo assim se você usar o seu exemplo

#box {
   display: flex;
}

.item {
   flex: 1 1 23%;
   margin: 0 1%;
}

Significa que os seus valores baseiam-se na largura, o que pode não ser bom para todos.


Eu encontrei uma solução que é baseada no css preceded by selector ~ , e permite aninhamento inifinite.

Veja esta caneta de código para um exemplo de trabalho

Basicamente, dentro de contêineres de coluna, cada filho que é precedido por outro filho recebe uma margem superior. Da mesma forma, dentro de cada contêiner de linha, cada filho que é precedido por outro recebe uma margem esquerda.

.box {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
}

.box.columns {
  flex-direction: row;
}

.box.columns>.box~.box {
  margin-left: 5px;
}

.box.rows {
  flex-direction: column;
}

.box.rows>.box~.box {
  margin-top: 5px;
}
<div class="box columns">
  <div class="box" style="background-color: red;"></div>
  <div class="box rows">
    <div class="box rows">
      <div class="box" style="background-color: blue;"></div>
      <div class="box" style="background-color: orange;"></div>
      <div class="box columns">
        <div class="box" style="background-color: yellow;"></div>
        <div class="box" style="background-color: pink;"></div>
      </div>
    </div>
    <div class="box" style="background-color: green;"></div>
  </div>
</div>


Eu usei isso para colunas de largura empacotada e fixa. A chave aqui é calc()

Amostra SCSS

$gap: 10px;

dl {
  display: flex;
  flex-wrap: wrap;
  padding: $gap/2;

  dt, dd {
    margin: $gap/2;}

  dt { // full width, acts as header
    flex: 0 0 calc(100% - #{$gap});}

  dd { // default grid: four columns 
    flex: 0 0 calc(25% - #{$gap});}

  .half { // hall width columns
    flex: 0 0 calc(50% - #{$gap});}

}

Amostra completa Codepen


Existe, de fato, uma maneira legal e simples de fazer isso (que pode ser considerado "melhor").

De todas as respostas postadas aqui, eu só encontrei uma que usa calc () com sucesso (por Dariusz Sikorski). Mas quando posou com: "mas falha se houver apenas dois itens na última linha" não houve solução expandida.

Esta solução resolve a questão do OP com uma alternativa às margens negativas e aborda o problema proposto a Dariusz.

notas:

  • Este exemplo demonstra apenas um layout de 3 colunas
  • Ele usa calc() para deixar o navegador fazer a matemática do jeito que quiser - 100%/3 (embora 33.3333% deva funcionar tão bem) , e (1em/3)*2 (embora .66em também funcione bem) .
  • Usa ::after para preencher a última linha se houver menos elementos que colunas

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-container:after {
  content: "";
}
.flex-container > div,
.flex-container:after {
  box-sizing: border-box;
  width: calc((100%/3) - ((1em/3)*2));
}
.flex-container > :nth-child(n + 4) {
  margin-top: 1em;
}

/* the following is just to visualize the items */
.flex-container > div,
.flex-container:after {
  font-size: 2em;
}
.flex-container {
  margin-bottom:4em;
}
.flex-container > div {
  text-align: center;
  background-color: #aaa;
  padding: 1em;
}
.flex-container:after {
  border: 1px dashed red;
}
<h2>Example 1 (2 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
</div>

<h2>Example 2 (3 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Também em https://codepen.io/anon/pen/rqWagE


Isso funcionará para todos os casos, mesmo se houver várias linhas ou qualquer número de elementos.

Estamos usando display: grid; e são propriedades.

#box {
  display: grid;
  width: 100px;
  grid-gap: 5px;
  /* Space between items */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* Decide the number of columns and size */
}

.item {
  background: gray;
  width: 100%;
  /* width is not necessary only added this to understand that width works as 100% to the grid template allocated space **DEFAULT WIDTH WILL BE 100%** */
  height: 50px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

A desvantagem deste método está no Mobile Opera Mini não será suportado e no PC isso funciona somente após o IE11 .

RESPOSTA VELHA

Se você quiser, pode sempre usar a combinação de irmãos CSS :

.item+.item{
  margin-left: 5px;
}

O código acima fará o truque. Neste método, não há necessidade de dar margin: 0 -5px; para o wrapper #box .

Uma amostra de trabalho para você:

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
.item+.item{
 margin-left: 5px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>


Por que não fazer assim:

.item + .item {
    margin-left: 5px;
}

Isso usa o seletor irmão adjacente para fornecer todos os elementos .item , exceto o primeiro, uma margin-left . Graças ao flexbox, isso resulta em elementos igualmente amplos. Isso também pode ser feito com elementos posicionados verticalmente e margin-top , é claro.


Um contêiner flexível com margem -x (negativa) e itens flexíveis com margem x (positiva) ou preenchimento levam ao resultado visual desejado: os itens Flex têm um intervalo fixo de 2x apenas entre si.

Parece ser simplesmente uma questão de preferência, seja para usar margem ou preenchimento nos itens flexíveis.

Neste exemplo, os itens flexíveis são dimensionados dinamicamente para preservar a lacuna fixa:

.flex-container { 
  margin: 0 -5px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-item {
  margin: 0 5px; // Alternatively: padding: 0 5px;
  flex: 1 0 auto;
}

Você pode usar bordas transparentes.

Eu tenho contemplado esse problema ao tentar construir um modelo de grade flexível que pode fazer fallback para um modelo de tabela + célula de tabela para navegadores mais antigos. E bordas para calhas de colunas me pareceu a melhor escolha. Ou seja, as células da tabela não têm margens.

por exemplo

.column{
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid transparent;
}

Observe também que você precisa de min-width: 50px; para flexbox. O modelo flexível não manipulará tamanhos fixos, a menos que você faça flex: none; no elemento filho específico que você deseja como fixo e, portanto, excluído de ser "flexi" . http://jsfiddle.net/GLpUp/4/ Mas todas as colunas juntas com flex:none; não é mais um modelo flexível. Aqui está algo mais próximo de um modelo flex: http://jsfiddle.net/GLpUp/5/

Assim, você pode usar as margens normalmente, se não precisar do fallback de célula de tabela para navegadores mais antigos. http://jsfiddle.net/GLpUp/3/

Configurando o background-clip: padding-box; será necessário ao usar um plano de fundo, caso contrário, o plano de fundo entrará na área de borda transparente.


Você pode usar o seletor & > * + * para emular um flex-gap (para uma única linha):

#box { display: flex; width: 230px; outline: 1px solid blue; }
.item { background: gray; width: 50px; height: 100px; }

/* ----- Flexbox gap: ----- */

#box > * + * {
  margin-left: 10px;
}
<div id='box'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>

Se você precisa dar suporte ao empacotamento flexível , é possível usar um elemento de wrapper:

.flex { display: flex; flex-wrap: wrap;  }
.box { background: gray; height: 100px; min-width: 100px; flex: auto; }
.flex-wrapper {outline: 1px solid red; }

/* ----- Flex gap 10px: ----- */

.flex > * {
  margin: 5px;
}
.flex {
  margin: -5px;
}
.flex-wrapper {
  width: 400px; /* optional */
  overflow: hidden; /* optional */
}
<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
  </div>
</div>


#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
/* u mean utility */
.u-gap-10 > *:not(:last-child) {
  margin-right: 10px;
}
<div id='box' class="u-gap-10">
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>


Eu defino o espaçamento nos itens flexíveis somente na direção estabelecida pelo contêiner deles. Por exemplo, se um contêiner flexível estiver definido para fluir da esquerda para a direita ( flex-direction:row), apenas configurarei a margem direita em seus filhos, com exceção do último:

.flex-lr{
    display:flex;
    flex-direction:row;
}

.flex-lr > *:not(:last-child){
    margin-right:5px;
}

Isto pode parecer funcionar à primeira vista, mas espere! isso não deve ser feito quando justify-contentestiver definido com um valor diferente de startou end, já que todos os outros valores já estão distribuindo o espaço por conta própria.

E se os itens embrulharem? Então devemos adicionar espaço ao lado do eixo transversal adequado também. Mas, como saber se um contêiner está permitindo que seus filhos se envolvam? E o que dizer wrap-reverse?

Todas essas considerações me fizeram pensar que essa não é uma tarefa trivial e requer um pequeno passo além.

Minha abordagem é baseada na construção de um breve conjunto de classes que funciona como um wrapper do flexbox. Isso tem alguns benefícios:

  1. Ele permite "centralizar" todos os prefixos de fornecedores em um único ponto e esquecer isso.
  2. Ele permite agrupar as propriedades do flexbox em uma única classe, ou até mesmo renomear algumas das palavras usadas pelo flexbox, que às vezes podem parecer pouco intuitivas (IMHO).
  3. Se eu usar essas classes, poderei escrever outras classes com base nos valores de propriedades flex que eles confiam. Por exemplo, eu seria capaz de definir o espaçamento com base na direção do fluxo, alinhamento do eixo cruzado, envolvimento, etc.

Eu acabei construindo um designer de flexbox para brincar com tudo isso, para ajudar a entender a mim mesmo (e aos outros) como o flexbox funciona e perceber o quão maravilhoso é o flexbox. Por favor, sinta-se livre para usá-lo seguindo o link abaixo:

http://algid.com/Flex-Designer

Então, abaixo você encontrará e resumo das classes que eu uso e a utilidade de espaçamento (margem) para uma direção de fluxo. Você poderá inferir os outros ou encontrá-los no link fornecido acima. Os prefixos do fornecedor foram omitidos aqui por brevidade.

/* Flex container definition */
.flex-lr{display:flex; flex-direction:row;}
.flex-tb{display:flex; flex-direction:column;}
.flex-rl{display:flex; flex-direction:row-reverse;}
.flex-bt{display:flex; flex-direction:column-reverse;}

/* Wrapping */
.wrap{flex-wrap:wrap;}
.nowrap{flex-wrap:nowrap;}
.wrap-rev{flex-wrap:wrap-reverse;}

/* Main axis alignment */
.align-start{justify-content:flex-start;}
.align-end{justify-content:flex-end;}
.align-center{justify-content:center;}
.align-between{justify-content:space-between;}
.align-around{justify-content:space-around;}
.align-evenly{justify-content:space-evenly;}

/* Cross axis alignment */
.cross-align-start{align-items:flex-start;}
.cross-align-end{align-items:flex-end;}
.cross-align-center{align-items:center;}
.cross-align-stretch{align-items:stretch;}
.cross-align-baseline{align-items:baseline;}

/* Cross axis alignment when content is wrapped */
.wrap-align-start{align-content:flex-start;}
.wrap-align-end{align-content:flex-end;}
.wrap-align-center{align-content:center;}
.wrap-align-stretch{align-content:stretch;}
.wrap-align-between{align-content:space-between;}
.wrap-align-around{align-content:space-around;}

/* Item alignment */
.item-cross-align-start{align-self:flex-start;}
.item-cross-align-end{align-self:flex-end;}
.item-cross-align-center{align-self:center;}
.item-cross-align-stretch{align-self:stretch;}
.item-cross-align-baseline{align-self:baseline;}
.item-cross-align-auto{align-self:auto;}

E agora a coisa que nos trouxe aqui: o espaço entre os itens:

/* Flow margin (left to right) */
.flex-lr.fm-0 > *:not(:last-child){margin-right:0;}
.flex-lr.fm-1 > *:not(:last-child){margin-right:3px;}
.flex-lr.fm-2 > *:not(:last-child){margin-right:7px;}
.flex-lr.fm-3 > *:not(:last-child){margin-right:15px;}
.flex-lr.fm-4 > *:not(:last-child){margin-right:32px;}

/* Cross axis */
.flex-lr.wrap.fm-0:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-0.wrap-align-stretch.cross-align-stretch > * {margin-bottom:0;}
.flex-lr.wrap.fm-1:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-1.wrap-align-stretch.cross-align-stretch > * {margin-bottom:3px;}
.flex-lr.wrap.fm-2:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-2.wrap-align-stretch.cross-align-stretch > * {margin-bottom:7px;}
.flex-lr.wrap.fm-3:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-3.wrap-align-stretch.cross-align-stretch > * {margin-bottom:15px;}
.flex-lr.wrap.fm-4:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap.fm-4.wrap-align-stretch.cross-align-stretch > * {margin-bottom:32px;}

/* wrap reverse */
.flex-lr.wrap-rev.fm-0:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-0.wrap-align-stretch.cross-align-stretch > * {margin-top:0;}
.flex-lr.wrap-rev.fm-1:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-1.wrap-align-stretch.cross-align-stretch > * {margin-top:3px;}
.flex-lr.wrap-rev.fm-2:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-2.wrap-align-stretch.cross-align-stretch > * {margin-top:7px;}
.flex-lr.wrap-rev.fm-3:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-3.wrap-align-stretch.cross-align-stretch > * {margin-top:15px;}
.flex-lr.wrap-rev.fm-4:not(.wrap-align-stretch):not(.wrap-align-between):not(.wrap-align-around) > *, .flex-lr.wrap-rev.fm-4.wrap-align-stretch.cross-align-stretch > * {margin-top:32px;}

Finalmente, é assim que a marcação se parece:

<div class="flex-lr cross-align-center fm-3">
    <div>
        Some content here...
    </div>
    <div>
        A bit more stuff here...
    </div>
    <div class="flex-tb fm-3">
        <div>
            Now vertical content
        </div>
        <div>
            etc.
        </div>
    </div>
</div>

Isso é o que eu chamo de código em voz alta.


Eu postei minha abordagem flexbox here :

Uma ideia que rejeitei foi remover o preenchimento das colunas externas com algo assim:

div:nth-child(#{$col-number}n+1) { padding-left: 0; }
div:nth-child(#{$col-number}n+#{$col-number}) { padding-left: 0; }

Mas, como outros pôsteres aqui, prefiro o truque da margem negativa. Meu violino também tem capacidade de resposta para qualquer pessoa está procurando uma solução baseada em Sass. Eu basicamente uso essa abordagem no lugar de uma grade.

https://jsfiddle.net/x3jvfrg1/


O truque de margem negativa no contêiner de caixa funciona muito bem. Aqui está outro exemplo trabalhando muito bem com o pedido, embalagem e quais não.

.container {
   border: 1px solid green;
   width: 200px;
   display: inline-block;
}

#box {
  display: flex;
  flex-wrap: wrap-reverse;
  margin: -10px;
  border: 1px solid red;
}
.item {
  flex: 1 1 auto;
  order: 1;
  background: gray;
  width: 50px;
  height: 50px;
  margin: 10px;
  border: 1px solid blue;
}
.first {
  order: 0;
}
<div class=container>
<div id='box'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item first'>3*</div>
  <div class='item'>4</div>
  <div class='item'>5</div>
</div>
</div>







flexbox