CODEWITHSUNDEEP
htmlcssflexbox
deathknight256
deathknight256

Reputation: 325

How to display 2 columns per row using flexbox

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: what i'm trying to achieve

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/

Upvotes: 5

Views: 38374

Answers (3)

Samuel John Orias
Samuel John Orias

Reputation: 1

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>

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371231

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>

Upvotes: 8

Renaldo Balaj
Renaldo Balaj

Reputation: 2440

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>

Upvotes: 0

Related Questions