css flex-direction的学习笔记CSS flex-direction 属性指定了内部元素是如何在 flex

<html>
<style>
#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;
}
</style>
<h4>This is a Column-Reverse</h4>
<div id="content">
    <div id="box" style="background-color:red;">A</div>
    <div id="box" style="background-color:lightblue;">B</div>
    <div id="box" style="background-color:yellow;">C</div>
</div>
<h4>This is a Row-Reverse</h4>
<div id="content1">
    <div id="box1" style="background-color:red;">A</div>
    <div id="box1" style="background-color:lightblue;">B</div>
    <div id="box1" style="background-color:yellow;">C</div>
</div>
</html>

在这里插入图片描述

CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

row: flex容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。
row-reverse: 表现和row相同，但是置换了主轴起点和主轴终点
column: flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
column-reverse: 表现和column相同，但是置换了主轴起点和主轴终点

删除reverse之后：

在这里插入图片描述