css学习之flex-direction属性

flex-direction属性

作用：指定该flex容器内部元素的排列方式，即确定主轴方向。
注意：flex容器必须使用属性display: flex；
参见flex-direction

主轴：默认为水平方向，自左向右；
侧轴：默认为垂直方向，自上向下；

(1).flex-direction: row（属性的默认值, 主轴为水平方向，内部的item自左向右）

<style>
  .d {
    display: flex;
    flex-direction: row;
  }
</style>
<div class="d">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</div>

(2).flex-direction: column（主轴为垂直方向，内部的item自上向下）

<style>
  .d {
    display: flex;
    flex-direction: column;
  }
</style>
<div class="d">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</div>

(3).flex-direction: row-reverse（主轴为水平方向，内部的item自右向左）

<style>
  .d {
    display: flex;
    flex-direction: column;
  }
</style>
<div class="d">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</div>

(4).flex-direction: column-reverse（主轴为垂直方向，内部的item自下向上）

<style>
  .d {
    display: flex;
    flex-direction: column;
  }
</style>
<div class="d">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</div>