¹æ¶¨Áé»îÏîÄ¿µÄ·½Ïò | flex-direction

/* The direction text is laid out in a line */
flex-direction: row;

/* Like <row>, but reversed */
flex-direction: row-reverse;

/* The direction in which lines of text are stacked */
flex-direction: column;

/* Like <column>, but reversed */
flex-direction: column-reverse;

/* Global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

row | row-reverse | column | column-reverse

<h4>This is a Column-Reverse</h4>
<div id="content">
??? <div class="box" style="background-color:red;">A</div>
??? <div class="box" style="background-color:lightblue;">B</div>
??? <div class="box" style="background-color:yellow;">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="content1">
??? <div class="box1" style="background-color:red;">A</div>
??? <div class="box1" style="background-color:lightblue;">B</div>
??? <div class="box1" style="background-color:yellow;">C</div>
</div>

#content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  -webkit-flex-direction: column-reverse;
  display: flex;
  flex-direction: column-reverse;
}

.box {
  width: 50px;
  height: 50px;
}

#content1 {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  -webkit-flex-direction: row-reverse;
  display: flex;
  flex-direction: row-reverse;
}

.box1 {
  width: 50px;
  height: 50px;
}