div+css3彈性盒子(flex box)布局

一街望、CSS3 彈性盒子(Flex Box)

彈性盒子是CSS3的一種新布局模式胜榔。
CSS3 彈性盒（ Flexible Box 或 flexbox）优幸，是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?br> 引入彈性盒布局模型的目的是提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間枣宫。
首先要明白幾個(gè)概念：
主軸：Flex容器的主軸主要用來(lái)配置Flex項(xiàng)目婆誓，默認(rèn)是水平方向
側(cè)軸：與主軸垂直的軸稱作側(cè)軸，默認(rèn)是垂直方向的
方向：默認(rèn)主軸從左向右也颤，側(cè)軸默認(rèn)從上到下
主軸和側(cè)軸并不是固定不變的洋幻，通過(guò)flex-direction可以互換。

主軸（main axis）是沿著 flex 元素放置的方向延伸的軸（比如頁(yè)面上的橫向的行翅娶、縱向的列）文留。該軸的開(kāi)始和結(jié)束被稱為main start 和main end好唯。
交叉軸（cross axis）是垂直于 flex 元素放置方向的軸。該軸的開(kāi)始和結(jié)束被稱為 cross start和 cross end燥翅。
設(shè)置了 display: flex 的父元素被稱之為 flex 容器（flex container）骑篙。
在 flex 容器中表現(xiàn)為柔性的盒子的元素被稱之為 flex 項(xiàng)（flex item）元素。

概念釋義

二森书、瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器的版本號(hào)靶端。

緊跟在數(shù)字后面的 -webkit- 或 -moz- 為指定瀏覽器的前綴。

屬性
Basic support (single-line flexbox)	29.0 21.0 -webkit-	11.0	22.0 18.0 -moz-	6.1 -webkit-	12.1 -webkit-
Multi-line flexbox	29.0 21.0 -webkit-	11.0	28.0	6.1 -webkit-	17.0 15.0 -webkit- 12.1

三拄氯、CSS3 彈性盒子內(nèi)容

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成躲查。
彈性容器通過(guò)設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器它浅。
彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性子元素译柏。
注意：彈性容器外及彈性子元素內(nèi)是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局姐霍。
彈性子元素通常在彈性盒子內(nèi)一行顯示鄙麦。默認(rèn)情況每個(gè)容器只有一行。
以下元素展示了彈性子元素在一行內(nèi)顯示镊折，從左到右:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>flex彈性盒子</title>
        <style>
            .container{ 
                width: 1002px; height: 302px; border:1px solid; 
                display: flex;
                }
            .item{width: 300px; height: 100px}
            .item1-1{ background:red;}
            .item1-2{ background:orange;width: 300px; height: 120px}
            .item1-3{ background:yellow;}
            .item1-4{ background:green;}
            .item1-5{ background:cyan;}
            .item1-6{ background:blue;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item1-1">1</div>
            <div class="item item1-2">2</div>
            <div class="item item1-3">3</div>
            <div class="item item1-4">4</div>
            <div class="item item1-5">5</div>
            <div class="item item1-6">6</div>
        </div>
    </body>
</html>

彈性盒子布局自動(dòng)一行填滿且不隨瀏覽器大小而變化

四胯府、CSS3 彈性盒子常用屬性

屬性	描述
flex-direction	指定彈性容器中子元素排列方式
flex-wrap	設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行
flex-flow	flex-direction 和 flex-wrap 的簡(jiǎn)寫
align-items	設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對(duì)齊方式
align-content	修改 flex-wrap 屬性的行為，類似 align-items, 但不是設(shè)置子元素對(duì)齊恨胚，而是設(shè)置行對(duì)齊
justify-content	設(shè)置彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式

1. flex-direction 屬性

決定項(xiàng)目的方向骂因。
注意：如果元素不是彈性盒對(duì)象的元素，則 flex-direction 屬性不起作用赃泡。

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

四種方向row | row-reverse | column | column-reverse

屬性值

值	描述
row	默認(rèn)值寒波。元素將水平顯示，正如一個(gè)行一樣升熊。
row-reverse	與 row 相同俄烁，但是以相反的順序。
column	元素將垂直顯示级野，正如一個(gè)列一樣页屠。
column-reverse	與 column 相同，但是以相反的順序蓖柔。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>flex彈性盒子</title>
        <style>
            .container{ 
                width: 1002px; height: 302px; border:1px solid; 
                display: flex;
                flex-direction:column;
                /* flex-direction: row | row-reverse | column | column-reverse;
                 *  row 默認(rèn)值辰企。元素將水平顯示，正如一個(gè)行一樣况鸣。
                    row-reverse 與 row 相同牢贸，但是以相反的順序。
                    column  元素將垂直顯示懒闷，正如一個(gè)列一樣十减。
                    column-reverse  與 column 相同栈幸，但是以相反的順序*/
                }
            .item{width: 300px; height: 100px}
            .item1-1{ background:red;}
            .item1-2{ background:orange;width: 300px; height: 120px}
            .item1-3{ background:yellow;}
            .item1-4{ background:green;}
            .item1-5{ background:cyan;}
            .item1-6{ background:blue;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item1-1">1</div>
            <div class="item item1-2">2</div>
            <div class="item item1-3">3</div>
            <div class="item item1-4">4</div>
            <div class="item item1-5">5</div>
            <div class="item item1-6">6</div>
        </div>
    </body>
</html>

flex-direction:column;結(jié)果

2. flex-wrap 屬性

flex-wrap 屬性規(guī)定flex容器是單行或者多行，同時(shí)橫軸的方向決定了新行堆疊的方向帮辟。

值	描述
nowrap	默認(rèn)值速址。規(guī)定元素不拆行或不拆列。
wrap	規(guī)定元素在必要的時(shí)候拆行或拆列由驹。
wrap-reverse	規(guī)定元素在必要的時(shí)候拆行或拆列芍锚，但是以相反的順序。

 flex-wrap: nowrap | wrap | wrap-reverse;

可以取三個(gè)值：
（1） nowrap (默認(rèn))：不換行蔓榄。

nowrap

（2）wrap：換行并炮，第一行在上方。

wrap

（3）wrap-reverse：換行甥郑，第一行在下方逃魄。

wrap-reverse

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>彈性盒子方向</title>
        <style>
            .container{ 
                width: 1002px; height: 302px; border:1px solid; 
                display: flex;
                /*flex-direction:column;*/
                /* flex-direction 屬性 決定項(xiàng)目的方向。
                 * flex-direction: row | row-reverse | column | column-reverse;
                 *  row 默認(rèn)值澜搅。元素將水平顯示伍俘，正如一個(gè)行一樣。
                    row-reverse 與 row 相同勉躺，但是以相反的順序癌瘾。
                    column  元素將垂直顯示，正如一個(gè)列一樣饵溅。
                    column-reverse  與 column 相同妨退，但是以相反的順序*/
                flex-wrap:wrap;
                /*flex-wrap 屬性 規(guī)定flex容器是單行或者多行，同時(shí)橫軸的方向決定了新行堆疊的方向蜕企。
                  flex-wrap: nowrap | wrap | wrap-reverse; 
                    nowrap  默認(rèn)值咬荷。規(guī)定元素不拆行或不拆列。
                    wrap    規(guī)定元素在必要的時(shí)候拆行或拆列糖赔。
                    wrap-reverse    規(guī)定元素在必要的時(shí)候拆行或拆列萍丐，但是以相反的順序。
                 * */
                }
            .item{width: 300px; height: 100px}
            .item1-1{ background:red;}
            .item1-2{ background:orange;width: 300px; height: 120px}
            .item1-3{ background:yellow;}
            .item1-4{ background:green;}
            .item1-5{ background:cyan;}
            .item1-6{ background:blue;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item1-1">1</div>
            <div class="item item1-2">2</div>
            <div class="item item1-3">3</div>
            <div class="item item1-4">4</div>
            <div class="item item1-5">5</div>
            <div class="item item1-6">6</div>
        </div>
    </body>
</html>

flex-wrap:wrap;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>彈性盒子方向</title>
        <style>
            .container{ 
                width: 1002px; height: 302px; border:1px solid; 
                display: flex;
                flex-direction:column;
                /* flex-direction 屬性 決定項(xiàng)目的方向放典。
                 * flex-direction: row | row-reverse | column | column-reverse;
                 *  row 默認(rèn)值逝变。元素將水平顯示，正如一個(gè)行一樣奋构。
                    row-reverse 與 row 相同壳影，但是以相反的順序。
                    column  元素將垂直顯示弥臼，正如一個(gè)列一樣宴咧。
                    column-reverse  與 column 相同，但是以相反的順序*/
                flex-wrap:wrap;
                /*flex-wrap 屬性 規(guī)定flex容器是單行或者多行径缅，同時(shí)橫軸的方向決定了新行堆疊的方向掺栅。
                  flex-wrap: nowrap | wrap | wrap-reverse; 
                    nowrap  默認(rèn)值烙肺。規(guī)定元素不拆行或不拆列。
                    wrap    規(guī)定元素在必要的時(shí)候拆行或拆列氧卧。
                    wrap-reverse    規(guī)定元素在必要的時(shí)候拆行或拆列桃笙，但是以相反的順序。
                 * */
            
                }
                
            .item{width: 300px; height: 100px}
            .item1-1{ background:red;}
            .item1-2{ background:orange;width: 300px; height: 120px}
            .item1-3{ background:yellow;}
            .item1-4{ background:green;}
            .item1-5{ background:cyan;}
            .item1-6{ background:blue;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item1-1">1</div>
            <div class="item item1-2">2</div>
            <div class="item item1-3">3</div>
            <div class="item item1-4">4</div>
            <div class="item item1-5">5</div>
            <div class="item item1-6">6</div>
        </div>
    </body>
</html>

flex-direction:column;flex-wrap:wrap;

3. flex-flow 屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式沙绝，默認(rèn)值為row nowrap搏明。

/* flex-flow: <flex-direction>  <flex-wrap> */
 flex-flow:column wrap;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>彈性盒子方向</title>
        <style>
            .container{ 
                width: 1002px; height: 302px; border:1px solid; 
                display: flex;
                flex-flow:row wrap;
                /*
                     flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap
                     flex-flow: <flex-direction> <flex-wrap>
                     例：flex-flow:row wrap;
                     
                 * * */
                }
                
            .item{width: 300px; height: 100px}
            .item1-1{ background:red;}
            .item1-2{ background:orange;width: 300px; height: 120px}
            .item1-3{ background:yellow;}
            .item1-4{ background:green;}
            .item1-5{ background:cyan;}
            .item1-6{ background:blue;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item1-1">1</div>
            <div class="item item1-2">2</div>
            <div class="item item1-3">3</div>
            <div class="item item1-4">4</div>
            <div class="item item1-5">5</div>
            <div class="item item1-6">6</div>
        </div>
    </body>
</html>

flex-flow:row wrap;

4. justify-content屬性

justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式闪檬。

值	描述
flex-start	默認(rèn)值星著。項(xiàng)目位于容器的開(kāi)頭。
flex-end	項(xiàng)目位于容器的結(jié)尾粗悯。
center	項(xiàng)目位于容器的中心虚循。
space-between	項(xiàng)目位于各行之間留有空白的容器內(nèi)。(兩端對(duì)齊为黎，項(xiàng)目之間的間隔都相等)
space-around	項(xiàng)目位于各行之前邮丰、之間行您、之后都留有空白的容器內(nèi)铭乾。(每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等.所以,項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍.)

分布圖

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>彈性盒子方向</title>
        <style>
            .container{ 
                width: 1002px; height: 302px; border:1px solid; 
                display: flex;
            /*justify-content: flex-start（默認(rèn)值） | flex-end | center | space-between | space-around;*/
                /*justify-content:space-around;*/
                /*
                    flex-start  默認(rèn)值。項(xiàng)目位于容器的開(kāi)頭娃循。
                    flex-end    項(xiàng)目位于容器的結(jié)尾炕檩。
                    center  項(xiàng)目位于容器的中心。
                    space-between   項(xiàng)目位于各行之間留有空白的容器內(nèi)捌斧。
                    space-around    項(xiàng)目位于各行之前笛质、之間、之后都留有空白的容器內(nèi)
                    
                 */
                }
            .item{width: 100px; height: 200px;}
            .item1-1{ background:red;height: 100px}
            .item1-2{ background:orange;width: 300px;}
            .item1-3{ background:yellow;}
            .item1-4{ background:green;}
            .item1-5{ background:cyan;}
            .item1-6{ background:blue;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item1-1">1</div>
            <div class="item item1-2">2</div>
            <div class="item item1-3">3</div>
            <div class="item item1-4">4</div>
            <div class="item item1-5">5</div>
            <div class="item item1-6">6</div>
        </div>
    </body>
</html>

默認(rèn) justify-content: flex-start;

justify-content:flex-end

justify-content:flex-end;

justify-content:center

justify-content:center;

justify-content:space-between; /*兩端對(duì)齊捞蚂，項(xiàng)目之間的間隔都相等妇押。*/

justify-content:space-between;兩端對(duì)齊，項(xiàng)目之間的間隔都相等

justify-content:space-around;每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等姓迅。所以敲霍，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

justify-content:space-around;每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等.所以,項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍.

5. align-items屬性

align-items 屬性定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對(duì)齊方式丁存。

值	描述
stretch	默認(rèn)值肩杈。項(xiàng)目被拉伸以適應(yīng)容器。
center	項(xiàng)目位于容器的中心解寝。
flex-start	項(xiàng)目位于容器的開(kāi)頭扩然。
flex-end	項(xiàng)目位于容器的結(jié)尾。
baseline	項(xiàng)目位于容器的基線上聋伦。

image

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>彈性盒子方向</title>
        <style>
            .container{ 
                width: 1002px; height: 302px; border:1px solid; 
                display: flex;
                align-items: stretch;
                /*
                flex-start：交叉軸的起點(diǎn)對(duì)齊夫偶。
                flex-end：交叉軸的終點(diǎn)對(duì)齊界睁。
                center：交叉軸的中點(diǎn)對(duì)齊。
                stretch（默認(rèn)值）：如果項(xiàng)未設(shè)置高度或設(shè)為auto兵拢，將占滿整個(gè)容器的高度晕窑。
                baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
                 * */

            }
            /*.item{width: 100px; height: 200px;}*/
            
            
            .item1-1{ background:red;height: 100px;width: 100px;}
            .item1-2{ background:orange;width: 300px;height: auto;}
            .item1-3{ background:yellow;width: 100px;}
            .item1-4{ background:green;width: 100px;}
            .item1-5{ background:cyan;width: 100px;}
            .item1-6{ background:blue;width: 100px;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item1-1">1</div>
            <div class="item item1-2">2</div>
            <div class="item item1-3">3</div>
            <div class="item item1-4">4</div>
            <div class="item item1-5">5</div>
            <div class="item item1-6">6</div>
        </div>
    </body>
</html>

默認(rèn)align-items: stretch;如果項(xiàng)未設(shè)置高度或設(shè)為auto卵佛，將占滿整個(gè)容器的高度

align-items:flex-start;

align-items:flex-start;交叉軸的起點(diǎn)對(duì)齊

align-items:flex-end;

align-items:flex-end;交叉軸的終點(diǎn)對(duì)齊

align-items:center;

align-items:center;交叉軸的中點(diǎn)對(duì)齊

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>彈性盒子方向</title>
        <style>
            .container{ 
                width: 1002px; height: 302px; border:1px solid; 
                display: flex;
                align-items:baseline;
                /*
                flex-start：交叉軸的起點(diǎn)對(duì)齊杨赤。
                flex-end：交叉軸的終點(diǎn)對(duì)齊。
                center：交叉軸的中點(diǎn)對(duì)齊截汪。
                stretch（默認(rèn)值）：如果項(xiàng)未設(shè)置高度或設(shè)為auto疾牲，將占滿整個(gè)容器的高度。
                baseline: 項(xiàng)目的第一行文字的基線對(duì)齊衙解。
                 * */

            }
            /*.item{width: 100px; height: 200px;}*/
            
            
            .item1-1{ background:red;height: 100px;width: 100px;
                       padding: 20px;} /* 修改文字開(kāi)始的位置 通過(guò)padding來(lái)修改*/
            .item1-2{ background:orange;width: 300px;height: auto;}
            .item1-3{ background:yellow;width: 100px;}
            .item1-4{ background:green;width: 100px;}
            .item1-5{ background:cyan;width: 100px;}
            .item1-6{ background:blue;width: 100px;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item1-1">1</div>
            <div class="item item1-2">2</div>
            <div class="item item1-3">3</div>
            <div class="item item1-4">4</div>
            <div class="item item1-5">5</div>
            <div class="item item1-6">6</div>
        </div>
    </body>
</html>

align-items:baseline;項(xiàng)目的第一行文字的基線對(duì)齊

align-content 定義了多根軸線的對(duì)齊方式

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

值	描述
flex-start	與交叉軸的起點(diǎn)對(duì)齊阳柔。
flex-end	與交叉軸的終點(diǎn)對(duì)齊。
center	與交叉軸的中點(diǎn)對(duì)齊蚓峦。
space-between	與交叉軸兩端對(duì)齊舌剂，軸線之間的間隔平均分布。
space-around	每根軸線兩側(cè)的間隔都相等暑椰。所以霍转，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認(rèn)值）	軸線占滿整個(gè)交叉軸一汽。

align-content 多根軸線的對(duì)齊方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>彈性盒子方向</title>
        <style>
            .container{ 
                width: 1002px; height: 302px; border:1px solid; 
                display: flex;
                flex-flow:row wrap;
                align-content: stretch;
                /*
                    flex-start：與交叉軸的起點(diǎn)對(duì)齊避消。
                    flex-end：與交叉軸的終點(diǎn)對(duì)齊。
                    center：與交叉軸的中點(diǎn)對(duì)齊召夹。
                    space-between：與交叉軸兩端對(duì)齊岩喷，軸線之間的間隔平均分布。
                    space-around：每根軸線兩側(cè)的間隔都相等监憎。所以纱意，軸線之間的間隔比軸線與邊框的間隔大一倍。
                    stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸鲸阔。
                 * */
            }
            /*.item{width: 100px; height: 200px;}*/
            .item1-1{ background:red;height: 100px;width: 100px; }
            .item1-2{ background:orange;width: 300px;height: auto;}
            .item1-3{ background:yellow;width: 100px;}
            .item1-4{ background:green;width: 100px;}
            .item1-5{ background:cyan;width: 100px;}
            .item1-6{ background:blue;width: 100px;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item1-1">1</div>
            <div class="item item1-2">2</div>
            <div class="item item1-3">3</div>
            <div class="item item1-4">4</div>
            <div class="item item1-5">5</div>
            <div class="item item1-6">6</div>
            <div class="item item1-1">1</div>
            <div class="item item1-2">2</div>
            <div class="item item1-3">3</div>
            <div class="item item1-4">4</div>
            <div class="item item1-5">5</div>
            <div class="item item1-6">6</div>

        </div>
    </body>
</html>

默認(rèn)align-content:stretch;

align-content:flex-start;

align-content: flex-start;

align-content: flex-end;

align-content: flex-end;

align-content:center;

align-content: center;

align-content:space-between;

align-content: space-between;與交叉軸兩端對(duì)齊偷霉，軸線之間的間隔平均分布。

align-content:space-around;

align-content:space-around;每根軸線兩側(cè)的間隔都相等隶债。所以腾它，軸線之間的間隔比軸線與邊框的間隔大一倍。

五死讹、flex-item項(xiàng)的常用屬性（彈性子元素屬性）

屬性	描述
order	設(shè)置彈性盒子的子元素排列順序瞒滴。
flex-grow	設(shè)置或檢索彈性盒子元素的擴(kuò)展比率。
flex-shrink	指定了 flex 元素的收縮規(guī)則。flex 元素僅在默認(rèn)寬度之和大于容器的時(shí)候才會(huì)發(fā)生收縮妓忍，其收縮的大小是依據(jù) flex-shrink 的值虏两。
flex-basis	用于設(shè)置或檢索彈性盒伸縮基準(zhǔn)值。
flex	設(shè)置彈性盒子的子元素如何分配空間世剖。
align-self	在彈性子元素上使用定罢。覆蓋容器的 align-items 屬性。

1. order屬性

數(shù)值越小旁瘫，排列越靠前祖凫，默認(rèn)為0。

 order: <integer>;

<integer>：用整數(shù)值來(lái)定義排列順序酬凳，數(shù)值小的排在前面惠况。可以為負(fù)值宁仔，默認(rèn)為0稠屠。

數(shù)值越小，排列越靠前

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>彈性盒子方向</title>
        <style>
            .container{ 
                width: 1002px; height: 302px; border:1px solid; 
                display: flex;
            }
            /*.item{width: 100px; height: 200px;}*/
            .item1-1{ background:red;height: 100px;width: 100px; order: 6;}
            .item1-2{ background:orange;width: 300px;height: auto;order: 5;}
            .item1-3{ background:yellow;width: 100px;order: 0;}
            .item1-4{ background:green;width: 100px;order: 3;}
            .item1-5{ background:cyan;width: 100px;order: 2;}
            .item1-6{ background:blue;width: 100px;order: 1;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item1-1">1</div>
            <div class="item item1-2">2</div>
            <div class="item item1-3">3</div>
            <div class="item item1-4">4</div>
            <div class="item item1-5">5</div>
            <div class="item item1-6">6</div>
        </div>
    </body>
</html>

order分別設(shè)置為 6 5 4 0 3 2 1

2. flex-grow屬性

 flex-grow: <integer>;

<integer>：一個(gè)數(shù)字翎苫，規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行擴(kuò)展的量权埠。默認(rèn)值是 0。

按照設(shè)置數(shù)字比例進(jìn)行拉伸煎谍，默認(rèn)為0攘蔽，即如果存在剩余空間，也不放大粱快。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>彈性盒子方向</title>
        <style>
            .container{ 
                width: 1002px; height: 302px; border:1px solid; 
                display: flex;
            }
            /*.item{width: 100px; height: 200px;}*/
            .item1-1{ background:red;height: 100px; flex-grow:1}
            .item1-2{ background:orange;height: auto;flex-grow:5}
            .item1-3{ background:yellow;flex-grow:1}
            .item1-4{ background:green;flex-grow:1}
            .item1-5{ background:cyan;flex-grow:1}
            .item1-6{ background:blue;flex-grow:1}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item1-1">1</div>
            <div class="item item1-2">2</div>
            <div class="item item1-3">3</div>
            <div class="item item1-4">4</div>
            <div class="item item1-5">5</div>
            <div class="item item1-6">6</div>
        </div>
    </body>
</html>

flex-grow 屬性設(shè)定分別為 1 5 1 1 1 1

3. flex-shrink屬性

flex 元素僅在默認(rèn)寬度之和大于容器的時(shí)候才會(huì)發(fā)生收縮秩彤，其收縮的大小是依據(jù) flex-shrink 的值。默認(rèn)為1事哭，即如果空間不足，該項(xiàng)目將縮小瓜富。負(fù)值對(duì)該屬性無(wú)效

flex-shrink: <integer>;

<integer>：一個(gè)數(shù)字鳍咱，規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行收縮的量。默認(rèn)值是 1与柑。
如果設(shè)置為0不進(jìn)行收縮谤辜，值越大收縮越多。

flex-shrink 設(shè)置分別為 1 0 1 1 1 1 1 1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>彈性盒子方向</title>
        <style>
            .container{ 
                width: 1002px; height: 302px; border:1px solid; 
                display: flex;
            }
            .item{width: 400px; height: 200px;flex-shrink:1}
            .item1-1{ background:red;height: 100px; }
            .item1-2{ background:orange;height: auto;flex-shrink:2}
            .item1-3{ background:yellow;flex-shrink:3}
            .item1-4{ background:green;}
            .item1-5{ background:cyan;}
            .item1-6{ background:blue;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item1-1">1</div>
            <div class="item item1-2">2</div>
            <div class="item item1-3">3</div>
            <div class="item item1-4">4</div>
            <div class="item item1-5">5</div>
            <div class="item item1-6">6</div>
        </div>
    </body>
</html>

flex-shrink 設(shè)置分別為 1 2 3 1 1 1 值越大縮放比例越大

4. flex-basis屬性

flex-basis: <integer> | auto;

<integer>：一個(gè)長(zhǎng)度單位或者一個(gè)百分比价捧，規(guī)定元素的初始長(zhǎng)度丑念。
auto：默認(rèn)值。長(zhǎng)度等于元素的長(zhǎng)度结蟋。如果該項(xiàng)目未指定長(zhǎng)度脯倚，則長(zhǎng)度將根據(jù)內(nèi)容決定。

如果不使用 box-sizing 來(lái)改變盒模型的話，那么這個(gè)屬性就決定了 flex 元素的內(nèi)容盒（content-box）的寬或者高（取決于主軸的方向）的尺寸大小推正。
默認(rèn)值為auto恍涂，即項(xiàng)目的本來(lái)大小。也可以設(shè)為跟width或height屬性一樣的值（比如350px）植榕，則項(xiàng)目將占據(jù)固定空間

5. flex屬性

flex 屬性用于設(shè)置或檢索彈性盒模型對(duì)象的子元素如何分配空間再沧。

flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡(jiǎn)寫屬性尊残。
是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫炒瘸，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選

 flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;

值	描述
flex-grow	一個(gè)數(shù)字寝衫，規(guī)定項(xiàng)目將相對(duì)于其他元素進(jìn)行擴(kuò)展的量什燕。
flex-shrink	一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他元素進(jìn)行收縮的量竞端。
flex-basis	項(xiàng)目的長(zhǎng)度屎即。合法值："auto"、"inherit" 或一個(gè)后跟 "%"事富、"px"技俐、"em" 或任何其他長(zhǎng)度單位的數(shù)字。
auto	與 1 1 auto 相同统台。
none	與 0 0 auto 相同雕擂。
initial	設(shè)置該屬性為它的默認(rèn)值，即為 0 1 auto贱勃。
inherit	從父元素繼承該屬性井赌。

6. align-self屬性

.flex-container .flex-item {
    align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;
}

值	描述
auto	默認(rèn)值。元素繼承了它的父容器的 align-items 屬性贵扰。如果沒(méi)有父容器則為 "stretch"仇穗。
stretch	元素被拉伸以適應(yīng)容器。
center	元素位于容器的中心戚绕。
flex-start	元素位于容器的開(kāi)頭纹坐。
flex-end	元素位于容器的結(jié)尾。
baseline	元素位于容器的基線上。
initial	設(shè)置該屬性為它的默認(rèn)值。
inherit	從父元素繼承該屬性踩麦。

可覆蓋align-items屬性。默認(rèn)值為auto谷誓，表示繼承父元素的align-items屬性，如果沒(méi)有父元素吨凑，則等同于stretch捍歪。

改變子元素的align-items

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>彈性盒子方向</title>
        <style>
            .container{ 
                width: 1002px; height: 302px; border:1px solid; 
                display: flex;
                align-items:flex-start;
                /*
                flex-start：交叉軸的起點(diǎn)對(duì)齊。
                flex-end：交叉軸的終點(diǎn)對(duì)齊。
                center：交叉軸的中點(diǎn)對(duì)齊费封。
                stretch（默認(rèn)值）：如果項(xiàng)未設(shè)置高度或設(shè)為auto焕妙，將占滿整個(gè)容器的高度。
                baseline: 項(xiàng)目的第一行文字的基線對(duì)齊弓摘。
                 * */

            }
            /*.item{width: 100px; height: 200px;}*/
            
            
            .item1-1{ background:red;height: 100px;width: 100px;
                       padding: 20px;}
            .item1-2{ background:orange;width: 300px;height: auto;}
            .item1-3{ background:yellow;width: 100px;}
            .item1-4{ background:green;width: 100px;}
            .item1-5{ background:cyan;width: 100px;}
            .item1-6{ background:blue;width: 100px; align-self:flex-end}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item1-1">1</div>
            <div class="item item1-2">2</div>
            <div class="item item1-3">3</div>
            <div class="item item1-4">4</div>
            <div class="item item1-5">5</div>
            <div class="item item1-6">6</div>

        </div>
    </body>
</html>

align-items:flex-start; align-self:flex-end;

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末焚鹊，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子韧献，更是在濱河造成了極大的恐慌末患，老刑警劉巖，帶你破解...
沈念sama閱讀 206,482評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件锤窑，死亡現(xiàn)場(chǎng)離奇詭異璧针，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)渊啰，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,377評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門探橱，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人绘证，你說(shuō)我怎么就攤上這事隧膏。” “怎么了嚷那？”我有些...
開(kāi)封第一講書人閱讀 152,762評(píng)論 0贊 342
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵胞枕，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我魏宽，道長(zhǎng)腐泻，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書人閱讀 55,273評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任队询，我火速辦了婚禮派桩，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘娘摔。我一直安慰自己窄坦，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 64,289評(píng)論 5贊 373
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布凳寺。她就那樣靜靜地躺著，像睡著了一般彤侍。火紅的嫁衣襯著肌膚如雪肠缨。梳的紋絲不亂的頭發(fā)上，一...
開(kāi)封第一講書人閱讀 49,046評(píng)論 1贊 285
城市分裂傳說(shuō)
那天盏阶，我揣著相機(jī)與錄音晒奕，去河邊找鬼。笑死，一個(gè)胖子當(dāng)著我的面吹牛脑慧，可吹牛的內(nèi)容都是我干的魄眉。我是一名探鬼主播，決...
沈念sama閱讀 38,351評(píng)論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼闷袒，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼坑律！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起囊骤，我...
開(kāi)封第一講書人閱讀 36,988評(píng)論 0贊 259
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤晃择，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后也物，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體宫屠，經(jīng)...
沈念sama閱讀 43,476評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,948評(píng)論 2贊 324
?白月光啟示錄
正文我和宋清朗相戀三年滑蚯，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了浪蹂。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 38,064評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡告材，死狀恐怖坤次，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情创葡，我是刑警寧澤浙踢，帶...
沈念sama閱讀 33,712評(píng)論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站灿渴，受9級(jí)特大地震影響洛波，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜骚露，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,261評(píng)論 3贊 307
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一蹬挤、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧棘幸，春花似錦焰扳、人聲如沸。這莊子的主人今日做“春日...
開(kāi)封第一講書人閱讀 30,264評(píng)論 0贊 19
一樁弒父案吨悍，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至蹋嵌，卻和暖如春育瓜，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背栽烂。一陣腳步聲響...
開(kāi)封第一講書人閱讀 31,486評(píng)論 1贊 262
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工躏仇，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留恋脚，地道東北人。一個(gè)月前我還...
沈念sama閱讀 45,511評(píng)論 2贊 354
代替公主和親
正文我出身青樓焰手，卻偏偏與公主長(zhǎng)得像糟描，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子书妻，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,802評(píng)論 2贊 345