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>