Make flex items go from bottom to top

Question

The following HTML and CSS creates a "bar chart". But the chart columns grow from top to bottom. How can I make them grow from bottom to top?

* {
  box-sizing: border-box;
  font-size: 0;
  text-align: center;
  line-height: 50px;
}

.bar-chart {
  box-shadow: none;
  height: calc(50px * 3);
  width: calc(50px * 4);
}

.column {
  display: inline-flex;
  width: 100px;
  flex-direction: row;
  flex-wrap: wrap;
  height: 150px;
}

.cell {
  box-shadow: 0 0 0 1px rgb(0, 0, 0);
  width: 50px;
  height: 50px;
  font-size: 14pt;
}

<figure class="bar-chart">
  <div class="column">
    <div class="cell">one</div>
    <div class="cell">two</div>
  </div>
  <div class="column">
    <div class="cell">three</div>
    <div class="cell">four</div>
    <div class="cell">five</div>
    <div class="cell">six</div>
    <div class="cell">seven</div>
    <div class="cell">eight</div>
  </div>
</figure>

Michael Benjamin · Accepted Answer · 2018-01-18T17:17:24.960

Instead of flex-wrap: wrap, use flex-wrap: wrap-reverse.

* {
  box-sizing: border-box;
  font-size: 0;
  text-align: center;
  line-height: 50px;
}

.bar-chart {
  box-shadow: none;
  height: calc(50px * 3);
  width: calc(50px * 4);
}

.column {
  display: inline-flex;
  width: 100px;
  flex-direction: row;
  flex-wrap: wrap-reverse;  /* ADJUSTED */
  height: 150px;
}

.cell {
  box-shadow: 0 0 0 1px rgb(0, 0, 0);
  width: 50px;
  height: 50px;
  font-size: 14pt;
}

<figure class="bar-chart">
  <div class="column">
    <div class="cell">one</div>
    <div class="cell">two</div>
  </div>
  <div class="column">
    <div class="cell">three</div>
    <div class="cell">four</div>
    <div class="cell">five</div>
    <div class="cell">six</div>
    <div class="cell">seven</div>
    <div class="cell">eight</div>
  </div>
</figure>

With wrap-reverse the cross-start and cross-end directions are switched.

In a row-direction container, this refers to the top and bottom (see the image below).

From the spec:

5.2. Flex Line Wrapping: the flex-wrap property

For the values that are not wrap-reverse, the cross-start direction is equivalent to either the inline-start or block-start direction of the current writing mode (whichever is in the cross axis) and the cross-end direction is the opposite direction of cross-start.

When flex-wrap is wrap-reverse, the cross-start and cross-end directions are swapped.

Make flex items go from bottom to top

1 Answers1

Linked

Related