CSS3彈性盒模型flexbox佈局

時間 2019-11-19

標籤 css3 css 彈性模型 flexbox 佈局欄目 CSS 简体版

原文原文鏈接

屬性介紹css

display: flex | inline-flex; (適用於父類容器元素上)

定義一個flex容器，內聯或者根據指定的值，來做用於下面的子類容器。·html

box：將對象做爲彈性伸縮盒顯示。（伸縮盒最老版本）（css3）
inline-box：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
flexbox：將對象做爲彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
inline-flexbox：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
flex：將對象做爲彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
inline-flex：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

請注意：

1.css 列（CSS columns）在彈性盒子中不起做用css3

2.float, clear and vertical-align 在flex項目中不起做用web

flex-direction (適用於父類容器的元素上)ide

定義：設置或檢索伸縮盒對象的子元素在父容器中的位置。·post

flex-direction: row | row-reverse | column | column-reverse

row：橫向從左到右排列（左對齊），默認的排列方式。
row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
column：縱向排列。
column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。

實例代碼：flex

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
   
    <style type="text/css">
        .box {
            display: flex;
            display:-webkit-flex;
            margin:0;
            padding:10px;
            list-style: none;
            background-color: #eee;

        }
        .box li{
            width:100px;
            height:100px;
            border:1px solid #aaa;
            text-align:center;
        }
        #box{
            -wekit-flex-direction:row;
            flex-direction: row;
        }
        #box2{
            -wekit-flex-direction:row-reverse;
            flex-direction:row-reverse;
        }
        #box3{
            -wekit-flex-direction:column;
            flex-direction:column;
        }
        #box4{
            -wekit-flex-direction:column-reverse ;
            flex-direction:column-reverse;
        }
    </style>
</head>
<body>
<h2>flex-direction:row</h2>
<ul id="box" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<h2>flex-direction:row-reverse</h2>
<ul id="box2" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<h2>flex-direction:column</h2>
<ul id="box3" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>


<h2>flex-direction:column-reverse</h2>
<ul id="box4" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
</body>
</html>

效果：ui

flex-wrap (適用於父類容器上)

設置或檢索伸縮盒對象的子元素超出父容器時是否換行。·flexbox

flex-wrap: nowrap | wrap | wrap-reverse

nowrap：當子元素溢出父容器時不換行。
wrap：當子元素溢出父容器時自動換行。
wrap-reverse：反轉 wrap 排列。
實例代碼：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">

    <style type="text/css">
        .box{
            display:-webkit-flex;
            display:flex;
            width:120px;
            margin:0;
            padding:10px;
            list-style:none;
            background-color:#eee;
        }
        .box li{
            width:50px;
            height:50px;
            border:1px solid #aaa;
            text-align:center;
        }
        #box{
            -webkit-flex-wrap:nowrap; flex-wrap:nowrap;
        }
        #box2{
            -webkit-flex-wrap:wrap;
            flex-wrap:wrap;
        }
        #box3{
            -webkit-flex-wrap:wrap-reverse;
            flex-wrap:wrap-reverse;
        }

    </style>
</head>
<body>
<h2>flex-wrap:nowrap</h2>
<ul id="box" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<h2>flex-wrap:wrap</h2>
<ul id="box2" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<h2>flex-wrap:wrap-reverse</h2>
<ul id="box3" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
</body>
</html>

效果：spa

flex-flow (適用於父類容器上)

複合屬性。設置或檢索伸縮盒對象的子元素排列方式。·

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

[ flex-direction ]：定義彈性盒子元素的排列方向。

[ flex-wrap ]：定義彈性盒子元素溢出父容器時是否換行。

代碼實例：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">

    <style type="text/css">
        .box{
            display:-webkit-flex;
            display:flex;
            width:120px;
            margin:0;
            padding:10px;
            list-style:none;
            background-color:#eee;
        }
        .box li{
            width:50px;
            height:50px;
            border:1px solid #aaa;
            text-align:center;
        }
        #box{
            -webkit-flex-flow:row nowrap;
            flex-flow:row nowrap;
        }
        #box2{
            -webkit-flex-flow:row wrap-reverse;
            flex-flow:row wrap-reverse;
        }
        #box3{
            height: 120px;
            -webkit-flex-flow:column wrap-reverse;
            flex-flow:column wrap-reverse;
        }

    </style>
</head>
<body>
<h2>flex-flow:row nowrap</h2>
<ul id="box" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<h2>flex-flow:row wrap-reverse</h2>
<ul id="box2" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<h2>flex-flow:column wrap-reverse</h2>
<ul id="box3" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
</body>
</html>

效果：

justify-content (適用於父類容器上)

設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。·

當彈性盒裏一行上的全部子元素都不能伸縮或已經達到其最大值時，這一屬性可協助對多餘的空間進行分配。當元素溢出某行時，這一屬性一樣會在對齊上進行控制。

justify-content: flex-start | flex-end | center | space-between | space-around

flex-start：彈性盒子元素將向行起始位置對齊。該行的第一個子元素的主起始位置的邊界將與該行的主起始位置的邊界對齊，同時全部後續的伸縮盒項目與其前一個項目對齊。

flex-end：彈性盒子元素將向行結束位置對齊。該行的第一個子元素的主結束位置的邊界將與該行的主結束位置的邊界對齊，同時全部後續的伸縮盒項目與其前一個項目對齊。

center：彈性盒子元素將向行中間位置對齊。該行的子元素將相互對齊並在行中居中對齊，同時第一個元素與行的主起始位置的邊距等同與最後一個元素與行的主結束位置的邊距（若是剩餘空間是負數，則保持兩端相等長度的溢出）。

space-between：彈性盒子元素會平均地分佈在行裏。若是最左邊的剩餘空間是負數，或該行只有一個子元素，則該值等效於'flex-start'。在其它狀況下，第一個元素的邊界與行的主起始位置的邊界對齊，同時最後一個元素的邊界與行的主結束位置的邊距對齊，而剩餘的伸縮盒項目則平均分佈，並確保兩兩之間的空白空間相等。

space-around：彈性盒子元素會平均地分佈在行裏，兩端保留子元素與子元素之間間距大小的一半。若是最左邊的剩餘空間是負數，或該行只有一個伸縮盒項目，則該值等效於'center'。在其它狀況下，伸縮盒項目則平均分佈，並確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最後一個元素後的空間爲其餘空白空間的一半。

代碼實例：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">

    <style type="text/css">
        .box{
            display:-webkit-flex;
            display:flex;
            width:400px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
        .box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
        #box{
            -webkit-justify-content:flex-start;
            justify-content:flex-start;
        }
        #box2{
            -webkit-justify-content:flex-end;
            justify-content:flex-end;
        }
        #box3{
            -webkit-justify-content:center;
            justify-content:center;
        }
        #box4{
            -webkit-justify-content:space-between;
            justify-content:space-between;
        }
        #box5{
            -webkit-justify-content:space-around;
            justify-content:space-around;
        }

    </style>
</head>
<body>
<ul id="box" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<h2>justify-content:flex-end</h2>
<ul id="box2" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<h2>justify-content:center</h2>
<ul id="box3" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<h2>justify-content:space-between</h2>
<ul id="box4" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<h2>justify-content:space-around</h2>
<ul id="box5" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
</body>
</html>

效果：

align-items (適用於父類容器上)

設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。·

align-items: flex-start | flex-end | center | baseline | stretch

flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸（縱軸）起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）結束位置的邊界緊靠住父容器的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它狀況下，該值將參與基線對齊。
stretch：若是指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸，但同時會遵守'min/max-width/height'屬性的限制。

代碼實例：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">

    <style type="text/css">
        .box{
            display:-webkit-flex;
            display:flex;
            width:200px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
        .box li{margin:5px;border-radius:5px;background:#aaa;text-align:center;}
        .box li:nth-child(1){padding:10px;}
        .box li:nth-child(2){padding:15px 10px;}
        .box li:nth-child(3){padding:20px 10px;}
        #box{
            -webkit-align-items:flex-start;
            align-items:flex-start;
        }
        #box2{
            -webkit-align-items:flex-end;
            align-items:flex-end;
        }
        #box3{
            -webkit-align-items:center;
            align-items:center;
        }
        #box4{
            -webkit-align-items:baseline;
            align-items:baseline;
        }
        #box5{
            -webkit-align-items:strecth;
            align-items:strecth;
        }

    </style>
</head>
<body>

<h2>align-items:flex-start</h2>
<ul id="box" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<h2>align-items:flex-end</h2>
<ul id="box2" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<h2>align-items:center</h2>
<ul id="box3" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<h2>align-items:baseline</h2>
<ul id="box4" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<h2>align-items:strecth</h2>
<ul id="box5" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
</body>
</html>

效果：

align-content (適用於父類容器上)

設置或檢索彈性盒堆疊伸縮行的對齊方式。·

align-content: flex-start | flex-end | center | space-between | space-around | stretch

flex-start：各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界，以後的每一行都緊靠住前面一行。
flex-end：各行向彈性盒容器的結束位置堆疊。彈性盒容器中最後一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界，以後的每一行都緊靠住前面一行。
center：各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊，保持彈性盒容器的側軸起始內容邊界和第一行之間的距離與該容器的側軸結束內容邊界與第最後一行之間的距離相等。（若是剩下的空間是負數，則各行會向兩個方向溢出的相等距離。）
space-between：各行在彈性盒容器中平均分佈。若是剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'flex-start'。在其它狀況下，第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最後一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界，剩餘的行則按必定方式在彈性盒窗口中排列，以保持兩兩之間的空間相等。
space-around：各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。若是剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'center'。在其它狀況下，各行會按必定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其餘空間的一半。
stretch：各行將會伸展以佔用剩餘的空間。若是剩餘的空間是負數，該值等效於'flex-start'。在其它狀況下，剩餘空間被全部行平分，以擴大它們的側軸尺寸。

代碼實例：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">

    <style type="text/css">
        .box{
            display:-webkit-flex;
            display:flex;
            -webkit-flex-wrap: wrap;

            width:200px;
            height:200px;
            margin:0;
            padding:0;
            border-radius:5px;
            list-style:none;
            background-color:#eee;
        }
        .box li{
            margin:5px;
            padding:10px;
            border-radius:5px;
            background:#aaa;text-align:center;}

        #box{
            -webkit-align-contebt:flex-start;
            align-content:flex-start;
        }
        #box2{
            -webkit-align-contebt:flex-end;
            align-content:flex-end;
        }
        #box3{
            -webkit-align-contebt:center;
            align-content:center;
        }
        #box4{
            -webkit-align-content:space-between;
            align-content:space-between;
        }
        #box5{
            -webkit-align-content:space-around;
            align-content:space-around;
        }
        #box6{
            -webkit-align-content:strecth;
            align-content:strecth;
        }
    </style>
</head>
<body>
<h2>align-content:flex-start</h2>
<ul id="box" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
</ul>
<h2>align-content:flex-end</h2>
<ul id="box2" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
</ul>
<h2>align-content:center</h2>
<ul id="box3" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
</ul>
<h2>align-content:space-between</h2>
<ul id="box4" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
</ul>
<h2>align-content:space-around</h2>
<ul id="box5" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
</ul>
<h2>align-content:strecth</h2>
<ul id="box6" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
</ul>
</body>
</html>

效果：

order (適用於彈性盒模型容器子元素)

order: <integer>

<integer>：用整數值來定義排列順序，數值小的排在前面。能夠爲負值。

代碼實例：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">

    <style type="text/css">
        .box{
            display:-webkit-flex;
            display:flex;
            margin:0;padding:10px;list-style:none;background-color:#eee;}
        .box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
        #box li:nth-child(3){
            -webkit-order:-1;
            order:-1;
        }
    </style>
</head>
<body>
<ul id="box" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>
</body>
</html>

效果：

flex-grow (適用於彈性盒模型容器子元素)

設置或檢索彈性盒的擴展比率。·

根據彈性盒子元素所設置的擴展因子做爲比率來分配剩餘空間。

flex-grow: <number> (default 0)

<number>：用數值來定義擴展比率。不容許負值
flex-grow的默認值爲0，若是沒有顯示定義該屬性，是不會擁有分配剩餘空間權利的。本例中b,c兩項都顯式的定義了flex-grow，能夠看到總共將剩餘空間分紅了4份，其中b佔1份，c佔3分，即1:3

代碼示例：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">

    <style type="text/css">
        .box{
            display:-webkit-flex;
            display:flex;
            margin:0;padding:10px;list-style:none;background-color:#eee;}
        .box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
        #box li:nth-child(2){
            -webkit-flex-grow:1;
            flex-grow:1;
        }
        #box li:nth-child(3){
            -webkit-flex-grow:2;
            flex-grow:2;
        }
    </style>
</head>
<body>
<ul id="box" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>
</body>
</html>

效果：

flex-shrink (適用於彈性盒模型容器子元素)

設置或檢索彈性盒的收縮比率（根據彈性盒子元素所設置的收縮因子做爲比率來收縮空間。）·

flex-shrink: <number> (default 1)

代碼示例：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">

    <style type="text/css">
        #flex{display:-webkit-flex;display:flex;width:400px;margin:0;padding:0;list-style:none;}
        #flex li{width:200px;}
        #flex li:nth-child(1){background:#888;}
        #flex li:nth-child(2){background:#ccc;}
        #flex li:nth-child(3){-webkit-flex-shrink:3;flex-shrink:3;background:#aaa;}
    </style>
</head>
<body>
<ul id="flex">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
</body>
</html>

效果：

說明：

flex-shrink的默認值爲1，若是沒有顯示定義該屬性，將會自動按照默認值1在全部因子相加以後計算比率來進行空間收縮。
本例中c顯式的定義了flex-shrink，a,b沒有顯式定義，但將根據默認值1來計算，能夠看到總共將剩餘空間分紅了5份，其中a佔1份，b佔1份，c佔3分，即1:1:3
咱們能夠看到父容器定義爲400px，子項被定義爲200px，相加以後即爲600px，超出父容器200px。那麼這麼超出的200px須要被a,b,c消化
按照以上定義a,b,c將按照1:1:3來分配200px，計算後便可得40px,40px,120px，換句話說，a,b,c各須要消化40px,40px,120px，那麼就須要用原定義的寬度相減這個值，最後得出a爲160px，b爲160px，c爲80px

flex-basis (適用於彈性盒模型容器子元素)

設置或檢索彈性盒伸縮基準值。·

flex-basis: <length> | auto (default auto)

auto：無特定寬度值，取決於其它屬性值
<length>：用長度值來定義寬度。不容許負值
<percentage>：用百分比來定義寬度。不容許負值

代碼實例：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">

    <style type="text/css">
        .box{
            display:-webkit-flex;
            display:flex;
            width:600px;margin:0;padding:10px;list-style:none;background-color:#eee;
        }
        .box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
        #box li:nth-child(3){
            -webkit-flex-basis:600px;
            flex-basis:600px;
        }
    </style>
</head>
<body>
<ul id="box" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>
</body>
</html>

效果：

flex (適用於彈性盒模型子元素)

複合屬性。設置或檢索伸縮盒對象的子元素如何分配空間。·

若是縮寫flex:1, 則其計算值爲：1 1 0

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

none：none關鍵字的計算值爲: 0 0 auto
[ flex-grow ]：定義彈性盒子元素的擴展比率。
[ flex-shrink ]：定義彈性盒子元素的收縮比率。
[ flex-basis ]：定義彈性盒子元素的默認基準值。

代碼實例：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">

    <style type="text/css">
        .box{
            display:-webkit-flex;
            display:flex;
            max-width:400px;height:100px;margin:10px 0 0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
        .box li{background:#aaa;text-align:center;}
        .box li:nth-child(1){background:#999;}
        .box li:nth-child(2){background:#aaa;}
        .box li:nth-child(3){background:#ccc;}
        #box li:nth-child(1){-webkit-flex:1;flex:1;}
        #box li:nth-child(2){-webkit-flex:1;flex:1;}
        #box li:nth-child(3){-webkit-flex:1;flex:1;}
        #box2 li:nth-child(1){-webkit-flex:1 0 100px;flex:1 0 100px;}
        #box2 li:nth-child(2){-webkit-flex:2 0 100px;flex:2 0 100px;}
        #box2 li:nth-child(3){-webkit-flex:3 0 100px;flex:3 0 100px;}
        #box3{max-width: 800px;}
        #box3 li:nth-child(1){-webkit-flex:1 1 300px;flex:1 1 300px;background:#999;}
        #box3 li:nth-child(2){-webkit-flex:1 2 500px;flex:1 2 500px;background:#aaa;}
        #box3 li:nth-child(3){-webkit-flex:1 3 600px;flex:1 3 600px;background:#ccc;}
    </style>
</head>
<body>
<ul id="box" class="box">
    <li>flex:1;</li>
    <li>flex:1;</li>
    <li>flex:1;</li>
</ul>
<ul id="box2" class="box">
    <li>flex:1 0 100px;</li>
    <li>flex:2 0 100px;</li>
    <li>flex:3 0 100px;</li>
</ul>
<ul id="box3" class="box">
    <li>flex:1 1 400px;</li>
    <li>flex:1 2 400px;</li>
    <li>flex:1 2 400px;</li>
</ul>
</body>
</html>

效果：

說明：

上例中，定義了父容器寬（即主軸寬）爲800px，因爲子元素設置了伸縮基準值flex-basis，相加300+500+600=1400，那麼子元素將會溢出1400-800=600px；
因爲同時設置了收縮因子，因此加權綜合可得300*1+500*2+600*3=3100px；
因而咱們能夠計算a,b,c將被移除的溢出量是多少：
a被移除溢出量：300*1/3100*600=3/31，即約等於58px
b被移除溢出量：500*2/3100*600=10/31，即約等於194px
c被移除溢出量：600*3/3100*600=18/31，即約等於348px
最後a,b,c的實際寬度分別爲：300-58=242px, 500-194=306px, 600-348=252px

2017-08-23 19:32:54