CODEWITHSUNDEEP
cssflexbox
Loïc V
Loïc V

Reputation: 635

how to order the flexbox direction vertically?

I'am using flexbox on a wrapper and i have 2 rows and 3 columns like this:

A B C
1 2 3

This is more or less the problem that i have:

<div class="container">
        <div class="col col-1">
          <div class="title">
            <img src={"http://es.rockybytes.com/i/393/image.jpg"} />
          </div>
          <div class="content">1</div>
        </div>
        <div class="col col-2">
          <div class="title">
            <img
              src={
                "https://www.portalprogramas.com/imagenes/programas/es/704/6704_0.jpg"
              }
            />
          </div>
          <div class="content">2</div>
        </div>
        <div class="col col-3">
          <div class="title">C</div>
          <div class="content">3</div>
        </div>
      </div>

The letters A, B , C are images of different sizes. I'm fixing the width which makes the numbers cells (1 2 & 3) not being aligned.

For example if the height of C is half of the height of B, 3 will be closer to the top than 2.

I've solved this by creating two rows od 3 columns. So now everything is aligned on desktop. (the first row has the css: align-items: center;display:flex; on it)

Row 1 : A B C with the images vertically centered Row 2: 1 2 3: They are naturally starting from the top, here, as intended, aligned

The problem is that going to mobile I get

A
B
C
1
2
3

But I would love to have 

A
1
B
2
C
3

Anyway to do this only with css?

I'm doing an app in react: It is possible to do it with some "isMobile" conditions and creating 2 different schemas. but would be awesome to be able to do it just configurating the css flexbox

SOLUTION: I wasn't able to do it with two rows, I'v used one row and align-items: baseline instead as suggested by @subgeo

Upvotes: 0

Views: 692

Answers (1)

Patriciu Nista
Patriciu Nista

Reputation: 853

Define your container as a flex with flex-flow: row wrap. Take a look at this example.

.container {
  display: flex;
  flex-flow: row wrap;
}

.col {
  width: 50px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  margin-right: 3px;
}

.col-1 {
  background-color: #f99;
}

.col-2 {
  background-color: #9f9;
}

.col-3 {
  background-color: #99f;
}
<div class="container">
    <div class="col col-1">
        <div class="title">A</div>
        <div class="content">1</div>
    </div>
    <div class="col col-2">
        <div class="title">B</div>
        <div class="content">2</div>
    </div>
    <div class="col col-3">
        <div class="title">C</div>
        <div class="content">3</div>
    </div>
</div>

Upvotes: 1

Related Questions