Flexbox mise en page mélangée pleine et demi-largeur

Question

Je possède 7 éléments dans un conteneur. Comment puis-je faire en sorte que les 3 premiers soient en pleine largeur et les 4 suivants en 50% de largeur?

J'ai également besoin que les éléments qui sont sur la même ligne visuellement aient la même hauteur.

Je peux utiliser Flexbox pour cela si nécessaire. Dans cette démo, le conteneur a une largeur fixe mais en réalité c'est une disposition responsive donc la largeur varie.

http://codepen.io/anon/pen/yJoPwK

.cont {
  display: flex;
  flex-direction: column;
  border: 1px solid grey;
  width: 200px;
  margin: auto;
}
.item-1 {
  background: blue;
}
.item-2 {
  background: green;
}
.item-3 {
  background: yellow;
}
.item-4 {
  background: blue;
}
.item-5 {
  background: grey;
}
.item-6 {
  background: orange;
}
.item-7 {
  background: gold;
}
.item-4,
.item-5,
.item-6,
.item-7 {
  width: 50%;
}

  1
  2
  3
  4  wrap
  5
  6
  7

C'est la mise en page que j'essaie d'obtenir:

Answer 1

Vous pouvez définir le conteneur sur flex-flow: row wrap;

Définissez les 3 premiers éléments flexibles sur width: 100%; et les 4 derniers éléments sur width: 50%;

Mise à jour Pen

.cont {
  display: flex;
  flex-flow: row wrap;
  border: 1px solid grey;
  width: 200px;
  margin: auto;
}

.item-1 { background: blue; }
.item-2 { background: green; }
.item-3 { background: yellow; }
.item-4 { background: blue; }
.item-5 { background: grey; }
.item-6 { background: orange; }
.item-7 { background: gold; }
.item-1, .item-2, .item-3 { width: 100%; }
.item-4, .item-5, .item-6, .item-7 { width: 50%; }

  1
  2
  3
  4  wrap
  5
  6
  7

Answer 2

Dans .item-4 et item-5 créez deux sous-éléments item-4-1, item-4-2,

ensuite .item-4, .item-5{display: flex} fera le travail

Demo

.cont {
  display: flex;
  flex-direction: column;
  border: 1px solid grey;
  width: 200px;
  margin: auto;
}
.item-1 {
  background: blue;
}
.item-2 {
  background: green;
}
.item-3 {
  background: yellow;
}
.item-4 {
  background: blue;
}
.item-5 {

}
.item-4, .item-5{
  display: flex
}
.item-4 .sub-item, .item-5 .sub-item{
  width: 50%;
}
.item-4 .item-4-2{
  background: grey;
}

.item-5-1 {
  background: orange;
}
.item-5-2 {
  background: gold;
}

  1
  2
  3

    4  envelopper
    5

    6
    7