Flexbox【彈性盒子模型】

時間 2019-11-19

標籤 flexbox 彈性盒子模型欄目 Flex 简体版

原文原文鏈接

1、Flexbox背景

　　`Flexbox`佈局（彈性盒模型）模塊的目的在於提供一種更有效的方法在容器中的項之間佈局、對齊和分配空間，即便它們的大小未知或是動態的(所以使用「`flex`一詞)。

2、Flexbox術語

伸縮容器：一個設有「display:flex」或「display:inline-flex」的元素
伸縮項目：伸縮容器的子元素
主軸、主軸方向：用戶代理沿着一個伸縮容器的主軸配置伸縮項目，主軸是主軸方向的延伸。
主軸起點、主軸終點：伸縮項目的配置從容器的主軸起點邊開始，往主軸終點邊結束。
主軸長度、主軸長度屬性：伸縮項目的在主軸方向的寬度或高度就是項目的主軸長度，伸縮項目的主軸長度屬性是width或height屬性，由哪個對着主軸方向決定。
側軸、側軸方向：與主軸垂直的軸稱做側軸，是側軸方向的延伸。
側軸起點、側軸終點：填滿項目的伸縮行的配置從容器的側軸起點邊開始，往側軸終點邊結束。
側軸長度、側軸長度屬性：伸縮項目的在側軸方向的寬度或高度就是項目的側軸長度，伸縮項目的側軸長度屬性是「width」或「height」屬性，由哪個對着側軸方向決定。

下圖是一個row伸縮容器中各類方向與大小術語的示意圖：

上圖以及術語介紹來自於：http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hanscss

3、Flexbox屬性和示例

普通示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Flexbox佈局</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

普通示例

效果圖：

一、display: flex：指定某元素使用 Flexbox 佈局。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Flexbox佈局</title>
        <style type="text/css">
            body{
                display: flex;
                background-color: rosybrown;
            }
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

使用Flexbox

效果圖：

二、flex-grow:1;【默認爲0】

說明：容器中剩餘的空間將平均分配給全部子元素。若是其中一個子元素的值爲2，那麼剩餘的空間將會佔用兩倍於其餘元素的空間；html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Flexbox佈局</title>
        <style type="text/css">
            body{
                display: flex;
                background-color: rosybrown;
            }
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                flex-grow: 1;
            }
            div:nth-child(2){
                background-color: royalblue;
                flex-grow: 2;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

使用flex-growth

效果圖：

小窗口：ide

大窗口：佈局

三、align-self 屬性定義flex子項單獨在側軸（縱軸）方向上的對齊方式。

值：
　　一、flex-start：頂邊對齊，高度不拉伸
　　二、flex-end ：底邊對齊，高度不拉伸
　　三、center ：居中，高度不拉伸
　　四、stretch ：默認值，高度自動拉伸

使用flex-start:頂部對齊，高度不拉伸

效果圖：

使用flex-end:底邊對齊，高度不拉伸

效果圖：

使用cente:居中，高度不拉伸

效果圖：

四、align-items 屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。

效果和 align-self 同樣，只是這個是寫在父元素上的：flex

例：flexbox

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Flexbox佈局</title>
        <style type="text/css">
            body{
                display: flex;
                background-color: rosybrown;    
                align-items:center;
            }
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;            
            }
            div:nth-child(2){
                background-color: royalblue;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

View Code

效果圖：spa

五、flex-direction 屬性規定靈活項目的方向

　　值：
　　　　一、row(默認) :從左到右;
　　　　二、row-reverse :是從右到左
　　　　三、column :從上到下
　　　　四、column-reverse:從下到上

row :從左到右

效果圖：3d

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Flexbox佈局</title>
        <style type="text/css">
            body{
                display: flex;
                background-color: rosybrown;    
                flex-direction:row-reverse;
            }
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                
                text-align: center;
                line-height: 100px;
                font-size: 50px;
                            
            }
        </style>
    </head>
    <body>
        <div>A</div>
        <div>B</div>
        <div>C</div>
    </body>
</html>

row-reverse :是從右到左

效果圖：代理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Flexbox佈局</title>
        <style type="text/css">
            body{
                display: flex;
                background-color: rosybrown;    
                flex-direction:column;
            }
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                
                text-align: center;
                line-height: 100px;
                font-size: 50px;
                            
            }
        </style>
    </head>
    <body>
        <div>A</div>
        <div>B</div>
        <div>C</div>
    </body>
</html>

column :從上到下

效果圖：code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Flexbox佈局</title>
        <style type="text/css">
            body{
                display: flex;
                background-color: rosybrown;    
                flex-direction:column-reverse;
            }
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                
                text-align: center;
                line-height: 100px;
                font-size: 50px;
                            
            }
        </style>
    </head>
    <body>
        <div>A</div>
        <div>B</div>
        <div>C</div>
    </body>
</html>

column-reverse:從下到上

效果圖：

六、flex-wrap 屬性規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。

值：
　　一、nowrap（默認）：全部flex item將在一條線上
　　二、wrap ：flex item將會從上到下分爲多行
　　三、wrap-reverse ：flex item將會從下到上分爲多行

nowrap：全部flex item將在一條線上

效果圖：

大窗口：

小窗口：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Flexbox佈局</title>
        <style type="text/css">
            body{
                display: flex;
                background-color: rosybrown;    
                flex-wrap:wrap;
            }
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

wrap ：flex item將會從上到下分爲多行

大窗口：

中窗口：

小窗口：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Flexbox佈局</title>
        <style type="text/css">
            body{
                display: flex;
                background-color: rosybrown;    
                flex-wrap:wrap-reverse;
            }
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

wrap-reverse ：flex item將會從下到上分爲多行

大窗口：

中窗口：

小窗口：

爲了頁面更美觀，咱們能夠把flex-grow和flex-wrap一塊兒使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Flexbox佈局</title>
        <style type="text/css">
            body{
                display: flex;
                background-color: rosybrown;    
                flex-wrap:wrap;
            }
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
                flex-grow: 1;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>