Is it possible to have a flexbox flow for row-reverse, but have the last item starting at the the top-right corner?

user_15224281 0
Viewed 349

This is somewhat of an advanced question about CSS flexbox. I have the following code:

#container {
  display: flex;
  width: 90px;
  flex-flow: wrap;
}

#container button {
  width: 27px;
  height: 27px;
}
<div id="container">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>

and it looks like this:

The assumption is, the 1 to 9 are computer generated, and cannot be altered, and cannot be made into 9 to 1.

With the above restriction, Now using CSS Flexbox, is it possible to make it:

If I merely change the flex-flow line above to:

flex-flow: wrap row-reverse;

it becomes:

and it is not doing the job. The requirement is: can the flow go in reverse direction with the element also in the reverse direction, and starting from the top-right corner?

I can change the flex box to contain 3 rows, and style them accordingly, or, I can make the number in the HTML go from 9 to 1, but what if we can't do that, but have to work with the current HTML structure and pure CSS flexbox style to make it work?

flexbox css
2 Answers

Was able to make it using "wrap-reverse" only.

See below

#container {
  display: flex;
  width: 90px;
  flex-flow: wrap-reverse;
 
}

#container button {
  width: 27px;
  height: 27px;  
}
<div id="container">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>

user_48285240

With @AlenToma's solution, we have closed this problem with all 4 possibilities, by mix-and-matching: wrap, wrap-reverse, row, row-reverse:

Note that flex-flow is a shorthand for flex-wrap and flex-direction.

If the desirable flow is vertical, we can just change the row to column, and that's 8 possibilities all covered.

The output:

#container01 {
  display: flex;
  width: 90px;
  flex-flow: wrap;
}

#container02 {
  display: flex;
  width: 90px;
  flex-flow: wrap-reverse;
}

#container03 {
  display: flex;
  width: 90px;
  flex-flow: wrap-reverse row-reverse;
}

#container04 {
  display: flex;
  width: 90px;
  flex-flow: wrap row-reverse;
}

div {
  margin: 1em;
}

button {
  width: 30px;
  height: 30px;
  box-sizing: context-box;
}
<div id="container01">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>
<div id="container02">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>
<div id="container03">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>
<div id="container04">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>

The vertical ones:

#container01 {
  display: flex;
  flex-flow: wrap column;
}

#container02 {
  display: flex;
  flex-flow: wrap-reverse column;
}

#container03 {
  display: flex;
  flex-flow: wrap-reverse column-reverse;
}

#container04 {
  display: flex;
  flex-flow: wrap column-reverse;
}

div {
  margin: 1em;
  width: 90px;
  height: 90px;
}

button {
  width: 30px;
  height: 30px;
  box-sizing: context-box;
}
<div id="container01">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>
<div id="container02">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>
<div id="container03">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>
<div id="container04">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>

user_152242810
Related