How to display 2 columns per row using flexbox - html

Question

I'm trying to display 2 columns every row but I can't seem to get it right at the moment.
What i'm trying to replicate is this:
but i'm not sure on how to handle this with using flexbox
.flex {
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
}
.box {
padding: 20px;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
<div class="flex">
<div class="box green">positive 1</div>
<div class="box yellow">positive 2</div>
<div class="box blue">positive 3</div>
<div class="box red">negative 1</div>
</div>
https://jsfiddle.net/1a9qLx5w/

Answer 1

The best way to achieve this layout would be with Grid CSS:
.flex {
display: grid;
grid-auto-flow: column;
grid-gap: 20px;
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px;
padding: 10px;
}
.box {
padding: 20px;
border: 1px solid black;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
* {
box-sizing: border-box;
}
<div class="flex">
<div class="box green">positive 1</div>
<div class="box yellow">positive 2</div>
<div class="box blue">positive 3</div>
<div class="box red">negative 1</div>
</div>
But since you're asking for a flexbox solution, here you go:
.flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 240px;
align-content: flex-start;
}
.box {
flex: 0 0 100px;
width: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
* {
box-sizing: border-box;
}
<div class="flex">
<div class="box green">positive 1</div>
<div class="box yellow">positive 2</div>
<div class="box blue">positive 3</div>
<div class="box red">negative 1</div>
</div>

Answer 2

Working demo :
.flex {
display: flex;
flex-direction: row;
flex-basis: 100%;
flex: 1;
}
.box {
padding: 20px;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.row {
display: flex;
flex-direction: row;
}
<div class="row">
<div class="box green">positive 1</div>
<div class="box yellow">positive 2</div>
</div>
<div class="row">
<div class="box blue">positive 3</div>
<div class="box red">negative 1</div>
</div>

Answer 3

I just copied your example:
.row{
display: flex;
flex-direction: row;
justify-content: center;
}
.green{
padding: 15px;
border: solid 1px green;
}
.red{
padding: 15px;
border: solid 1px red;
}
.col{
margin-right: 15px;
}
<div class="row">
<div class="col">
<p class="green">Positive 1</p>
<p class="green">Positive 2</p>
</div>
<div class="col">
<p class="red">No Thanks</p>
</div>
</div>