情侣91av在线,每日更新AV日韩,国产精品二区三区91

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)伸縮容器
標準版	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容器不是塊容器，因此有些設計用來控制塊布局的屬性在伸縮布局中不適用。浮動無法影響伸縮容器，而且伸縮容器的margin與其內(nèi)容的margin不會重疊。如果內(nèi)聯(lián)伸縮容器設置了浮動，元素將會以塊級伸縮容器顯示。

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類似，方向從下到上排列。

版本	屬性名稱	水平方向	水平反方向	垂直方向	垂直反方向
標準版本	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不準換行，伸縮容器容納不下伸縮項目時，各伸縮項目會根據(jù)默認的收縮比例進行縮小以適應伸縮容器的寬度
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

用來設置伸縮項目在主軸上的對齊方式。指定如何在伸縮項目之間分布伸縮容器額外空間。當一行上的所有伸縮項目不能伸縮或可伸縮但是已達到最大長度時，這一屬性才會對伸縮容器額外空間進行分配。當伸縮項目溢出某一行時，這一屬性也會在項目的對齊上施加一些控制。
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ī)范版本	屬性名	屬性值
標準版本	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設置為1，每個伸縮項目將設置一個大小相等的額外空間。如果給其中一個伸縮項目設置flex-grow設置為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，用來設置flex-basis長度并指定伸縮基準值，也就是根據(jù)可伸縮比例計算出額外空間的分布之前，伸縮項目主軸長度的起始數(shù)值。
　　如果設置為0，內(nèi)容不在考慮周圍額外空間。如果設置為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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

css3 彈性伸縮布局盒模型flex

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

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

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

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

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

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

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