css3 彈性伸縮布局盒模型flex

CSS3引入的布局模式Flexbox布局，主要思想是讓容器有能力讓其子項目能夠改變其寬度杆煞，高度谋逻，以最佳方式填充可用空間塔插。Flex容器使用Flex項目可以自動放大與收縮冠摄，用來填補可用的空閑空間糯崎。

TB2qVpodVXXXXXLXpXXXXXXXXXX_!!2406102577.png

主軸：Flex容器的主軸主要用來配置Flex項目。他不一定是水平的耗拓，這主要取決于fle-direction屬性拇颅。
主軸起點奏司，主軸終點：Flex項目的配置從容器的主軸起點邊開始乔询，往主軸終點邊結(jié)束。
主軸長度：Flex項目在主軸方向的寬度或高度就是項目的主軸長度韵洋，F(xiàn)lex項目的主軸長度屬性是width或height屬性竿刁，由哪一個對著主軸方向決定黄锤。
側(cè)軸：與主軸垂直的軸稱作側(cè)軸，是側(cè)軸方向的延伸食拜。
側(cè)軸起點鸵熟，側(cè)軸終點：伸縮行的配置從容器的側(cè)軸起點邊開始，往側(cè)軸終點邊結(jié)束负甸。
側(cè)軸長度：Flex項目在側(cè)軸方向的寬度或高度就是項目的側(cè)軸長度流强，F(xiàn)lex項目的側(cè)軸長度屬性是widht或height屬性，由哪一個對著主軸方向決定呻待。

Flex容器屬性

1.display

要改變元素的模式為伸縮容器打月，需要使用display屬性
display : flex | inline-flex

版本表格

規(guī)范版本	屬性名稱	塊伸縮容器	內(nèi)聯(lián)伸縮容器
標(biāo)準(zhǔn)版	display	flex	inline-flex
混合版	display	flexbox	inline-flexbox
最老版	display	box	inline-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;padding:0;
        }
        .contentitem {
            margin:10px auto;
            background-color:#ccc;
        }

        #box div,#inline div {

            width:100px;
            height:100px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:40px;
            box-sizing:border-box;
        }
        #box {
            display:flex;
            border:1px dashed red;
            padding:10px;
            flex-direction:row;
        }
        #inline {
            display:inline-flex;
            border:1px dashed red;
            padding:10px;
        }
    </style>
</head>
<body>

<div class="contentitem">
    <h4>flex 塊級伸縮容器</h4>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>
<div class="contentitem">
    <h4>inline-flex 內(nèi)聯(lián)伸縮容器</h4>
    <div id="inline">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>
</body>
</html>

image.png

塊級伸縮容器與內(nèi)聯(lián)級伸縮容器類似，默認都是從左往右排列蚕捉，唯一不同的是塊級伸縮容器獨占一行奏篙，而內(nèi)聯(lián)級伸縮容器隨著內(nèi)容改變。
　　Flex容器不是塊容器迫淹，因此有些設(shè)計用來控制塊布局的屬性在伸縮布局中不適用秘通。浮動無法影響伸縮容器，而且伸縮容器的margin與其內(nèi)容的margin不會重疊敛熬。如果內(nèi)聯(lián)伸縮容器設(shè)置了浮動肺稀，元素將會以塊級伸縮容器顯示。

2.flex-direction

定義Flex項目在Flex容器中放置的方向
flex-direction : row | row-reverse | column | column-reverse
row:默認值荸型，如果書寫方式是ltr盹靴，那么Flex項目從左向右排列；如果書寫方式是rtl瑞妇，那么Flex項目從右向左排列稿静。
row-reverse:如果書寫方式是ltr，那么Flex項目從右向左排列辕狰；如果書寫方式是rtl改备，那么Flex項目從左向右排列。
column:和row類似蔓倍，方向從上到下排列悬钳。
column-reverse:和row-reverse類似，方向從下到上排列偶翅。

版本	屬性名稱	水平方向	水平反方向	垂直方向	垂直反方向
標(biāo)準(zhǔn)版本	flex-direction	row	row-reverse	column	column-reverse
混合版本	flex-direction	row	row-reverse	column	column-reverse
老版本	box-orient / box-direction	horizontal/normal	horizontal/normal	vertical/normal	vertical/reverse

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;padding:0;
        }
        .contentitem {
            margin:10px auto;
            background-color:#ccc;
            max-width:600px;
        }

        #row div,#row_reverse div,#column div,#column_reverse div {
            width:50px;
            height:50px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:20px;
            box-sizing:border-box;
        }
        #row,#row_reverse,#column_reverse,#column {
            display:flex;
            border:1px dashed red;
            padding:10px;
        }
        #row {flex-direction:row}
        #row_reverse {flex-direction:row-reverse}
        #column {flex-direction:column}
        #column_reverse {flex-direction:column-reverse}
    </style>
</head>
<body>

<div class="contentitem">
    <h4>flex-direction:row</h4>
    <div id="row">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>
<div class="contentitem">
    <h4>flex-direction:row-reverse</h4>
    <div id="row_reverse">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>
<div class="contentitem">
    <h4>flex-direction:row</h4>
    <div id="column">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>
<div class="contentitem">
    <h4>flex-direction:row-reverse</h4>
    <div id="column_reverse">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>
</body>
</html>

image.png

3.flex-wrap

默認情況下默勾，F(xiàn)lex項目都盡可能在一行顯示，你可以根據(jù)flex-wrap的屬性值來改變聚谁，讓Flex項目多行顯示母剥。
因為默認值nowrap不準(zhǔn)換行，伸縮容器容納不下伸縮項目時，各伸縮項目會根據(jù)默認的收縮比例進行縮小以適應(yīng)伸縮容器的寬度
flex-wrap:nowrap | wrap | wrap-reverse
- nowrap:默認值环疼，單行顯示习霹，如果書寫方式是ltr，F(xiàn)lex項目從左往右排列炫隶；如果書寫方式是trl淋叶，F(xiàn)lex項目從右往左排列。
- wrap:多行顯示伪阶，如果書寫方式是ltr煞檩，F(xiàn)lex項目從左往右排列；如果書寫方式是trl栅贴，F(xiàn)lex項目從右往左排列形娇。
- wrap-reverse:多行顯示，如果書寫方式是ltr筹误，F(xiàn)lex項目從右往左排列桐早；如果書寫方式是trl，F(xiàn)lex項目從左往右排列厨剪。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;padding:0;
        }
        .contentitem {
            margin:10px auto;
            background-color:#ccc;
            max-width:600px;
        }
        #wrap div,#nowrap div,#wrap_reverse div {
            width:50px;
            height:50px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:20px;
            box-sizing:border-box;
        }
        #wrap,#nowrap ,#wrap_reverse{
            display:flex;
            border:1px dashed red;
            padding:10px;
            flex-direction:row;
        }
        #wrap {flex-wrap:wrap}
        #nowrap {flex-wrap:nowrap}
        #wrap_reverse {flex-wrap:wrap-reverse}
    </style>
</head>
<body>

<div class="contentitem">
    <h4>flex-wrap:wrap</h4>
    <div id="wrap">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
    </div>
</div>
<div class="contentitem">
    <h4>flex-wrap:nowrap</h4>
    <div id="nowrap">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
    </div>
</div>
<div class="contentitem">
    <h4>flex-wrap:wrap-reverse</h4>
    <div id="wrap_reverse">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
    </div>
</div>
</body>
</html>

image.png

4.flex-flow

這是flex-direction和flex-wrap兩個屬性的縮寫哄酝，默認值是：row nowrap
flex-flow :flex-direction || flex-wrap

5.justify-content

用來設(shè)置伸縮項目在主軸上的對齊方式。指定如何在伸縮項目之間分布伸縮容器額外空間祷膳。當(dāng)一行上的所有伸縮項目不能伸縮或可伸縮但是已達到最大長度時陶衅，這一屬性才會對伸縮容器額外空間進行分配。當(dāng)伸縮項目溢出某一行時直晨，這一屬性也會在項目的對齊上施加一些控制搀军。
justify-content : flex-start | flex-end | center | space-between | space-around
- flex-start:默認值，伸縮項目向一行的起始位置靠齊勇皇。伸縮容器沿著布局軸方向的所有額外空間都被置于布局軸的末尾罩句。
- flex-end:和flex-start相反，伸縮項目向一行的結(jié)束位置靠齊敛摘。伸縮容器沿著布局軸方向的所有額外空間都被置于布局軸的開始门烂。
- center:伸縮項目向一行的中間位置靠齊。伸縮容器的所有額外空間平均分布在第一伸縮項目前面和最后一個伸縮項目的后面兄淫。
- space-between:伸縮項目會平均分布在行里屯远。伸縮容器的所有額外空間平均分布在所有伸縮項目之間，但是在第一個伸縮項目之前和最后一個伸縮項目之后不分配空間捕虽，也就是說慨丐，第一個伸縮項目靠齊開始位置，最后一個伸縮項目靠齊結(jié)束位置泄私。
- space-around:伸縮項目會品均分布在行里房揭。伸縮容器的所有額外空間品均分布在所有伸縮項目之間挨措，但是第一個伸縮項目之前與最后一個伸縮項目之后只分配其他位置得到額外空間的一半。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;padding:0;
        }
        .contentitem {
            margin:10px auto;
            background-color:#ccc;
            max-width:600px;
        }
        #flex_start div,#flex_end div,#center div,#space_between div,#space_around div {
            width:50px;
            height:50px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:20px;
            box-sizing:border-box;
        }
        #flex_start,#flex_end ,#center,#space_between,#space_around{
            display:flex;
            border:1px dashed red;
            padding:10px;
            flex-direction:row;
        }
        #flex_start {justify-content:flex-start}
        #flex_end {justify-content:flex-end}
        #center {justify-content:center}
        #space_between {justify-content:space-between}
        #space_around {justify-content:space-around}
    </style>
</head>
<body>

<div class="contentitem">
    <h4>justify-content:flex-start</h4>
    <div id="flex_start">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
<div class="contentitem">
    <h4>justify-content:flex-end</h4>
    <div id="flex_end">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
<div class="contentitem">
    <h4>justify-content:center</h4>
    <div id="center">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
<div class="contentitem">
    <h4>justify-content:space-between</h4>
    <div id="space_between">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
<div class="contentitem">
    <h4>justify-content:space-around</h4>
    <div id="space_around">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
</body>
</html>

image.png

6.align-items(管理側(cè)軸)

align-items屬性和justify-content同樣是用來管理伸縮容器額外空間崩溪，不同的是，justify-content是用來管理伸縮容器主軸方向的額外空間斩松，而align-items是用來管理伸縮容器側(cè)軸方向的額外空間伶唯。
align-items : flex-start | flex-end |center | baseline | stretch
- flex-start:伸縮項目在側(cè)軸起點邊的外邊距緊靠住該行在側(cè)軸起始的邊。
- flex-end:伸縮項目在側(cè)軸終點邊的外邊距靠住該行在側(cè)軸終點的邊惧盹。
- center:伸縮項目的外邊距盒在該行的側(cè)軸上居中放置乳幸。
- baseline:如果伸縮項目的行內(nèi)軸與側(cè)軸為同一條，則該值和flex-start等效钧椰。其它情況下粹断，該值將參與基線對齊。所有參與該對齊方式的伸縮項目將按下列方式排列：首先將這些伸縮項目的基線進行對齊嫡霞，隨后其中基線至側(cè)軸起點邊的外邊距距離最長的那個項目將緊靠住該行在側(cè)軸起點的邊瓶埋。
- stretch:如果側(cè)軸長度屬性的值為auto，則此值會使項目的外邊距盒的尺寸在遵照min/max-width/height屬性的限制下盡可能接近所在行的尺寸诊沪。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;padding:0;
        }
        .contentitem {
            margin:10px auto;
            background-color:#ccc;
            max-width:600px;
        }
        #flex_start div,#flex_end div,#center div,#baseline div,#stretch div {
            width:50px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:20px;
            box-sizing:border-box;
            min-height:50px;
        }
        #flex_start,#flex_end ,#center,#baseline,#stretch{
            display:flex;
            border:1px dashed red;
            padding:10px;
            flex-direction:row;
            height:100px;
        }
        #flex_start {align-items:flex-start}
        #flex_end {align-items:flex-end}
        #center {align-items:center}
        #baseline {align-items:baseline}
        #stretch {align-items:stretch}
    </style>
</head>
<body>

<div class="contentitem">
    <h4>align-items:flex-start</h4>
    <div id="flex_start">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-itmes:flex-end</h4>
    <div id="flex_end">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-items:center</h4>
    <div id="center">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-items:baseline</h4>
    <div id="baseline">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-items:stretch</h4>
    <div id="stretch">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
</body>
</html>

image.png

7.align-content(管理側(cè)軸)

是伸縮項目占多行時在側(cè)軸方向的對齊屬性养筒，這個屬性將對每一行起作用而不是每個伸縮項目。
align-content : flex-start | flex-end | center | space-between | space-around | stretch
- flex-start:各行向伸縮容器的起點位置堆疊端姚。
- flex-end:各行向伸縮容器的結(jié)束位置堆疊晕粪。
- center:各行向伸縮容器的中間位置堆疊。
- space-between:各行在伸縮容器中平均分布渐裸。
- space-around:各行在伸縮容器中品均分布巫湘，在兩邊各有一半空間。
- stretch:默認值昏鹃，各行將會伸展以占用額外空間尚氛。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;padding:0;
        }
        .contentitem {
            /*margin:10px auto;*/
            background-color:#ccc;
            max-width:500px;
            float:left;
            margin:10px;
        }
        #flex_start div,#flex_end div,#center div,#space_between div,#space_around div,#stretch div {
            width:50px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:20px;
            box-sizing:border-box;
            min-height:50px;
        }
        #flex_start,#flex_end ,#center,#space_between,#space_around,#stretch{
            display:flex;
            border:1px dashed red;
            padding:10px;
            flex-direction:row;
            height:150px;
            flex-flow:wrap;
        }
        #flex_start {align-content:flex-start}
        #flex_end {align-content:flex-end}
        #center {align-content:center}
        #space_between {align-content:space-between}
        #space_around {align-content:space-around}
        #stretch {align-content:stretch}
    </style>
</head>
<body>

<div class="contentitem">
    <h4>align-content:flex-start</h4>
    <div id="flex_start">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-content:flex-end</h4>
    <div id="flex_end">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-content:center</h4>
    <div id="center">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-content:space-between</h4>
    <div id="space_between">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-content:space-around</h4>
    <div id="space_around">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-content:stretch</h4>
    <div id="stretch">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</div>
</body>
</html>

image.png

Flex項目屬性

1.order

默認情況下，F(xiàn)lex項目是按照文檔流的結(jié)構(gòu)順序排列洞渤，在Flexbox模型中怠褐，可以通過order屬性來改變伸縮項目出現(xiàn)在文檔中的順序
order : <number>;
- number可以是負值，F(xiàn)lexbox容器將根據(jù)各項目中order值的大小進行排列

規(guī)范版本	屬性名	屬性值
標(biāo)準(zhǔn)版本	order	<number>
混合版本	flex-order	<number>
老版本	flex-order	<interger>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin:0;padding:0;}
        .contentitem {
            margin:10px auto;
            background-color:#ccc;
            max-width:500px;
        }
        #order div {
            width:50px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:20px;
            box-sizing:border-box;
            height:50px;
        }
        #order {
            display:flex;
            border:1px dashed red;
            padding:10px;
            flex-direction:row;
            height:100px;
            flex-flow:wrap;
            justify-content:space-around;
        }
        .orderone {order: 5;}
        .ordertwo { order: 1;}
        .orderthree {order: 0;}
    </style>
</head>
<body>

<div class="contentitem">
    <h4>order:number</h4>
    <div id="order">
        <div class="orderone">1</div>
        <div>2</div>
        <div>3</div>
        <div class="ordertwo">4</div>
        <div class="orderthree">5</div>
        <div>6</div>
        <div>7</div>
    </div>
</div>
</body>
</html>

image.png

2.flex-grow

定義一個Flex項目的擴大比例并且會撐滿一行
flex-grow : <number>;
- 默認值為0您宪，不能取負值奈懒，沒有單位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin:0;padding:0;}
        .contentitem {
            margin:10px auto;
            background-color:#ccc;
            max-width:500px;
        }
        #flex_grow div {
            width:50px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:20px;
            box-sizing:border-box;
            height:50px;
        }
        #flex_grow {
            display:flex;
            border:1px dashed red;
            padding:10px;
            flex-direction:row;
            height:100px;
            flex-flow:wrap;
            justify-content:space-around;
        }
        .growOne { flex-grow: 2;}
        .growTwo {flex-grow: 1;}
    </style>
</head>
<body>

<div class="contentitem">
    <h4>flex-grow:number</h4>
    <div id="flex_grow">
        <div class="growOne">1</div>
        <div class="growTwo">2</div>
        <div class="growTwo">3</div>
        <div class="growTwo">4</div>
        <div class="growTwo">5</div>
        <div class="growTwo">6</div>
        <div class="growTwo">7</div>
    </div>
</div>
</body>
</html>

image.png

如果伸縮項目的flex-grow設(shè)置為1，每個伸縮項目將設(shè)置一個大小相等的額外空間宪巨。如果給其中一個伸縮項目設(shè)置flex-grow設(shè)置為2磷杏，這個伸縮項目所占的額外空間是其他伸縮項目所占額外空間的2倍。
也可以這樣理解捏卓，把上例各項目的flex-grow值加起來等于4极祸，就是把額外空間分成4份慈格，比例為1的占1份，比例為2的占2份遥金。

3.flex-shrink

定義一個Flex項目的縮小比例
flex-shrink:<number>
- 默認值為1浴捆；

試過了但是沒看到效果有可能瀏覽器不支持下圖沒有效果不建議使用

image.png

4.flex-basis

定義了Flex項目在分配Flex容器剩余空間之前的一個默認尺寸。
flex-basis:<length> | auto
flex-basis類似于width稿械，用來設(shè)置flex-basis長度并指定伸縮基準(zhǔn)值选泻，也就是根據(jù)可伸縮比例計算出額外空間的分布之前，伸縮項目主軸長度的起始數(shù)值美莫。
　　如果設(shè)置為0页眯，內(nèi)容不在考慮周圍額外空間。如果設(shè)置為auto厢呵，額外空間會基于flex-grow值做分布窝撵。如下所示：

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin:0;padding:0;}
        .contentitem {
            margin:10px auto;
            background-color:#ccc;
            max-width:500px;
        }
        #flex_basis div {
            width:50px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:20px;
            box-sizing:border-box;
            height:50px;
        }
        #flex_basis {
            display:flex;
            border:1px dashed red;
            padding:10px;
            flex-direction:row;
            height:100px;
            flex-flow:wrap;
            justify-content:space-around;
        }
        #flex_basis div:nth-child(2) { flex-basis: 80px;}
        #flex_basis div:nth-child(1) { flex-basis: 50px;}
        #flex_basis div:nth-child(3) { flex-basis: 50px;}
        #flex_basis div:nth-child(4) { flex-basis: 50px;}
        #flex_basis div:nth-child(5) { flex-basis: 50px;}
    </style>
</head>
<body>

<div class="contentitem">
    <h4>flex-basis:number</h4>
    <div id="flex_basis">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
     </div>
</div>
</body>
</html>

image.png

5.flex

flex是flex-grow，flex-shrink襟铭，flex-basis三個屬性的縮寫碌奉。第二個和第三個參數(shù)是可選值。默認值是0 1 auto寒砖。
flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>]
也可以這樣用：(感覺跟 flex-grow 用法一樣)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       *{ margin:0;padding:0;}
       .contentitem {
           margin:10px auto;
           background-color:#ccc;
           max-width:500px;
       }
       #flex div {
           border:1px solid #00dc50;
           border-radius:2px;
           box-shadow:2px 2px 2px;
           background-color:pink;
           text-align:center;
           padding-top:20px;
           box-sizing:border-box;
           height:50px;
       }
       #flex {
           display:flex;
           border:1px dashed red;
           padding:10px;
           flex-direction:row;
           height:100px;
           flex-flow:wrap;
           justify-content:space-around;
       }
       #flex div:nth-child(2) { flex:2;}
       #flex div:nth-child(1) { flex:1;}
       #flex div:nth-child(3) { flex:1;}
       #flex div:nth-child(4) { flex:1;}
       #flex div:nth-child(5) { flex:1;}
       #flex div:last-of-type { flex:2;}
   </style>
</head>
<body>
<div class="contentitem">
   <h4>flex:number</h4>
   <div id="flex">
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>4</div>
       <div>5</div>
       <div>6</div>
    </div>
</div>
</body>
</html>

image.png

6.align-self

用來在單獨的伸縮項目上覆寫默認的對齊方式道批。
align-self:auto | flex-start | flex-end | center | baseline | stretch
- align-self的值與align-items一樣。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin:0;padding:0;}
        .contentitem {
            margin:10px auto;
            background-color:#ccc;
            max-width:500px;
        }
        .contentitem div div{
            width:50px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:20px;
            box-sizing:border-box;
            min-height:50px;
        }
        .contentitem > div {
            display:flex;
            border:1px dashed red;
            padding:10px;
            flex-direction:row;
            height:100px;
            flex-flow:wrap;
            justify-content:space-around;
            align-items:center;
        }
        #flex_start div:nth-child(1) { align-self:flex-start;}
        #flex_end   div:nth-child(1) { align-self:flex-end;}
        #center     div:nth-child(1) { align-self:center;}
        #baseline   div:nth-child(1) { align-self:baseline;}
        #stretch    div:nth-child(2) {align-self:stretch;}
    </style>
</head>
<body>
<div class="contentitem">
    <h4>align-self:align-start</h4>
    <div id="flex_start">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
     </div>
</div>
<div class="contentitem">
    <h4>align-self:flex-end</h4>
    <div id="flex_end">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-self:center</h4>
    <div id="center">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-self:baseline</h4>
    <div id="baseline">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-self:stretch</h4>
    <div id="stretch">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</div>
</body>
</html>

效果

image.png

各位讀者大家好入撒，有什么錯誤的地方歡迎及時提出意見和建議

最后編輯于：2018.11.21 10:54:25

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

人面猴
序言：七十年代末隆豹，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子茅逮，更是在濱河造成了極大的恐慌璃赡，老刑警劉巖，帶你破解...
沈念sama閱讀 222,252評論 6贊 516
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件献雅，死亡現(xiàn)場離奇詭異碉考，居然都是意外死亡，警方通過查閱死者的電腦和手機挺身，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,886評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門侯谁，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人章钾，你說我怎么就攤上這事墙贱。” “怎么了贱傀？”我有些...
開封第一講書人閱讀 168,814評論 0贊 361
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵惨撇，是天一觀的道長。經(jīng)常有香客問我府寒，道長魁衙，這世上最難降的妖魔是什么报腔？我笑而不...
開封第一講書人閱讀 59,869評論 1贊 299
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮剖淀，結(jié)果婚禮上纯蛾，老公的妹妹穿的比我還像新娘。我一直安慰自己纵隔，他們只是感情好翻诉，可當(dāng)我...
茶點故事閱讀 68,888評論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著巨朦，像睡著了一般。火紅的嫁衣襯著肌膚如雪剑令。梳的紋絲不亂的頭發(fā)上糊啡，一...
開封第一講書人閱讀 52,475評論 1贊 312
城市分裂傳說
那天，我揣著相機與錄音吁津，去河邊找鬼棚蓄。笑死，一個胖子當(dāng)著我的面吹牛碍脏，可吹牛的內(nèi)容都是我干的梭依。我是一名探鬼主播，決...
沈念sama閱讀 41,010評論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼典尾，長吁一口氣：“原來是場噩夢啊……” “哼役拴！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起钾埂，我...
開封第一講書人閱讀 39,924評論 0贊 277
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤河闰，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后褥紫，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體姜性，經(jīng)...
沈念sama閱讀 46,469評論 1贊 319
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,552評論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年髓考，在試婚紗的時候發(fā)現(xiàn)自己被綠了部念。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 40,680評論 1贊 353
活死人
序言：一個原本活蹦亂跳的男人離奇死亡氨菇，死狀恐怖儡炼，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情查蓉，我是刑警寧澤射赛，帶...
沈念sama閱讀 36,362評論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站奶是，受9級特大地震影響楣责，放射性物質(zhì)發(fā)生泄漏竣灌。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 42,037評論 3贊 335
男人毒藥：我在死后第九天來索命
文/蒙蒙一秆麸、第九天我趴在偏房一處隱蔽的房頂上張望初嘹。院中可真熱鬧，春花似錦沮趣、人聲如沸屯烦。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,519評論 0贊 25
一樁弒父案房铭，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽驻龟。三九已至，卻和暖如春缸匪，著一層夾襖步出監(jiān)牢的瞬間翁狐，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,621評論 1贊 274
情欲美人皮
我被黑心中介騙來泰國打工凌蔬，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留露懒，地道東北人。一個月前我還...
沈念sama閱讀 49,099評論 3贊 378
代替公主和親
正文我出身青樓砂心，卻偏偏與公主長得像懈词，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子辩诞，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,691評論 2贊 361

css3 彈性伸縮布局盒模型flex

Flex容器屬性

1.display

版本表格

2.flex-direction

3.flex-wrap

4.flex-flow

5.justify-content

6.align-items(管理側(cè)軸)

7.align-content(管理側(cè)軸)

Flex項目屬性

1.order

2.flex-grow

3.flex-shrink

4.flex-basis

5.flex

6.align-self

各位讀者大家好入撒，有什么錯誤的地方歡迎及時提出意見和建議

推薦閱讀更多精彩內(nèi)容