2、flex六⼤属性之flex-direction

目录 [toc]

flex-direction

简介

flex-direction属性决定主轴的⽅向

语法

值	描述	示例
row （默认值）	主轴为⽔平⽅向，起点在左边	1
row-reverse	主轴为⽔平⽅向，起点在右边	2
column	主轴为垂直⽅向，起点在上⾯	3
column-reverse	主轴为垂直⽅向，起点在下⾯	4

示例

示例1

示例1源码

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例1源码</title>

<style>
    .flexTest{
        display: flex;
        height: 600px;
        border: 1px solid red;
        flex-direction: row;
    }
    .item{
        width: 100px;
        height: 100px;
        background-color: gray;
        margin: 10px;
        text-align: center;
        line-height: 100px;
    }
</style>

    <h1>示例1</h1>
    <div class="flexTest">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

示例1效果图

示例2

示例2源码

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例2源码</title>

<style>
    .flexTest{
        display: flex;
        height: 600px;
        border: 1px solid red;
        flex-direction: row-reverse;
    }
    .item{
        width: 100px;
        height: 100px;
        background-color: gray;
        margin: 10px;
        text-align: center;
        line-height: 100px;
    }
</style>

    <h1>示例2</h1>
    <div class="flexTest">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

示例2效果图

示例3

示例3源码

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例3源码</title>

<style>
    .flexTest{
        display: flex;
        height: 600px;
        border: 1px solid red;
        flex-direction: column;
    }
    .item{
        width: 100px;
        height: 100px;
        background-color: gray;
        margin: 10px;
        text-align: center;
        line-height: 100px;
    }
</style>

    <h1>示例3</h1>
    <div class="flexTest">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

示例3效果图

示例4

示例4源码

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例4源码</title>

<style>
    .flexTest{
        display: flex;
        height: 600px;
        border: 1px solid red;
        flex-direction: column-reverse;
    }
    .item{
        width: 100px;
        height: 100px;
        background-color: gray;
        margin: 10px;
        text-align: center;
        line-height: 100px;
    }
</style>

    <h1>示例4</h1>
    <div class="flexTest">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

来源：oschina

链接：https://my.oschina.net/xuzilong/blog/3176076