弹性布局--flex方向

客官°小女子只卖身不卖艺 2021-12-18 15:11 229阅读 0赞

## flex方向 ##

flex方向由flex-direction特性决定,用于定义弹性布局模式。flex-direction共有4种模式：从左向右、从右向左、从上往下、从下往上。

**主轴**

主轴的起点与终点定义了容器元素的开始和结束边缘。

**交叉轴**

交叉轴的起点与终点定义了容器的顶部与底部。

**从左向右：flex-direction:row**

主轴：水平方向；交叉轴：垂直方向。

![604357-20190228223454931-61490278.png][]

**从右向左：flex-direction:** **row-reverse****（flex-direction:row的反向）**

**从上往下：flex-direction: column  **

主轴：垂直方向；交叉轴：水平方向。

![604357-20190228223507931-1166372734.png][]

** **

**从下往上 ： flex-direction: column\-reverse（flex-direction: column反向）**

注意：flexbox弹性布局不存在高、宽、水平、垂直等属性值。盒子模型的大小终于由浏览器计算得到。flexbox不会自己换行的，空间不够会自动伸缩。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            * {
         
                margin: 0;
                padding: 0px;
            }
    
            .flexbox-row{
         
                display: flex;
                flex-direction: row;
            }
            .box{
         
                width: 50px;
                height: 50px;
            }
            .flexbox-column{
         
                display: flex;
                flex-direction: column;
            }
            .flexbox-row-reverse{
         
                display: flex;
                flex-direction: row-reverse;
            }
            .flexbox-column-reverse{
         
                display: flex;
                flex-direction: column-reverse;
            }
        </style>
    </head>
    <body>
    
    <div class="flexbox-row">
        <div class="box" style="background-color:coral;">A</div>
        <div class="box" style="background-color:lightblue;">B</div>
        <div class="box" style="background-color:khaki;">C</div>
        <div class="box" style="background-color:pink;">D</div>
        <div class="box" style="background-color:lightgrey;">E</div>
        <div class="box" style="background-color:lightgreen;">F</div>
    </div>
    
    
    <div class="flexbox-column">
        <div class="box" style="background-color:coral;">A</div>
        <div class="box" style="background-color:lightblue;">B</div>
        <div class="box" style="background-color:khaki;">C</div>
        <div class="box" style="background-color:pink;">D</div>
        <div class="box" style="background-color:lightgrey;">E</div>
        <div class="box" style="background-color:lightgreen;">F</div>
    </div>
    <div class="flexbox-row"></div>
    
    <div class="flexbox-row-reverse">
        <div class="box" style="background-color:coral;">A</div>
        <div class="box" style="background-color:lightblue;">B</div>
        <div class="box" style="background-color:khaki;">C</div>
        <div class="box" style="background-color:pink;">D</div>
        <div class="box" style="background-color:lightgrey;">E</div>
        <div class="box" style="background-color:lightgreen;">F</div>
    </div>
    
    
    <div class="flexbox-column-reverse">
        <div class="box" style="background-color:coral;">A</div>
        <div class="box" style="background-color:lightblue;">B</div>
        <div class="box" style="background-color:khaki;">C</div>
        <div class="box" style="background-color:pink;">D</div>
        <div class="box" style="background-color:lightgrey;">E</div>
        <div class="box" style="background-color:lightgreen;">F</div>
    </div>
    </body>
    </html>

** **

转载于:https://www.cnblogs.com/whnba/p/10453697.html

[604357-20190228223454931-61490278.png]: /images/20211218/d54e27a26ef742bf9b6b64af825c586f.png
[604357-20190228223507931-1166372734.png]: /images/20211218/c89fe70eb4274e90981a60f2211deb34.png