change the column arrangement direction in CSS

AmirHosein 0
Viewed 36

in CSS I use flex and I have problem with arrangement direction!!

I want this when I use column and wrap :

3, 1,

4 2,

but it happens like this :

1, 3,

2, 4

what should I do??

flexbox css html
1 Answers

Unfortunately, flexbox cannot do this using conventional CSS properties.

However, by utilising flexbox together with the dir attribute it can be achieved.

div {
  width: 75px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid green;
}

main {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 156px;
  aspect-ratio: 1;
  gap: 2px;
}
<main dir="rtl">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</main>

Paulie_D0
Related