精品一区二区三区在线成人,亚洲国产精品久久人人爱,亚洲精品无码AV人在线播放

0. 前言

傳統(tǒng)的布局，都是基于盒模型，display，float，position，有的時候感覺它做出來的界面缺少一些靈活性，這時候我們就可以使用Flex布局，是Flexible Box的縮寫，意為"彈性布局"，它可以讓你界面有很大的靈活性。但是你得了解Flex的語法，好了，不多說了，直接上干貨！！！

網(wǎng)上的圖片.jpg

1. 基本概念

采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。

2. 標(biāo)簽屬性

容器的屬性

1. 主軸方向：左到右（默認(rèn)） | 右到左 | 上到下 | 下到上
flex-direction: row | row-reverse | column | column-reverse
2. 換行：不換行（默認(rèn)） | 換行 | 換行并第一行在下方
flex-wrap: nowrap | wrap | wrap-reverse
3.主軸方向和換行簡寫
flex-flow: <flex-direction> || <flex-wrap>
4.主軸對齊方式：左對齊（默認(rèn)） | 右對齊 | 居中對齊 | 兩端對齊 | 平均分布
justify-content: flex-start | flex-end | center | space-between | space-around
5.交叉軸對齊方式：頂部對齊 | 底部對齊 | 居中對齊 | 文本基線對齊 | 如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。（默認(rèn)）
align-items: flex-start | flex-end | center | baseline | stretch
6.多主軸對齊：頂部對齊 | 底部對齊 | 居中對齊 | 上下對齊并鋪滿 | 軸線占滿整個交叉軸。（默認(rèn)）
align-content: flex-start | flex-end | center | space-between | space-around | stretch

項目的屬性

1. 排序：數(shù)值越小，越排前，默認(rèn)為0
order: <integer>
2.放大：默認(rèn)0（即如果有剩余空間也不放大，值為1則放大，2是1的雙倍大小(約等)，以此類推）
flex-grow: <number>; /* default 0 */
3.縮小：如果所有項目的flex-shrink屬性都為1，當(dāng)空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。
負(fù)值對該屬性無效。）
flex-shrink: <number>; /* default 1 */
4.固定大小：默認(rèn)為0，可以設(shè)置px值，也可以設(shè)置百分比大小
flex-basis: <length> | auto; /* default auto */
5.flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
6.單獨對齊方式：自動（默認(rèn)） | 頂部對齊 | 底部對齊 | 居中對齊 | 文本基線對齊 | 上下對齊并鋪滿
align-self: auto | flex-start | flex-end | center | baseline | stretch

3. 代碼實現(xiàn)

3.1 容器的屬性

一、flex-direction

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul,li{
                list-style: none;
            }
            ul{
                width: 500px;
                height: 300px;
                border: 2px solid black;
                display: flex;
            }
            li{
                width: 80px;
                height: 50px;
                border: 2px solid black;
                color: white;
                background-color: red;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
</html>

flex-direction: row

ul:nth-of-type(1){
                /* *主軸方向：左到右（默認(rèn)） */
                flex-direction: row;
            }

圖片.png

flex-direction: row-reverse

ul:nth-of-type(2){
                /*主軸方向：右到左*/
                 flex-direction: row-reverse;
            }

圖片.png

flex-direction: column

ul:nth-of-type(3){
                /*主軸方向：上到下*/
                 flex-direction: column;
            }

圖片.png

flex-direction: column-reverse

ul:nth-of-type(4){
                /*主軸方向：下到上*/
                 flex-direction: column-reverse;
            }

圖片.png

二、flex-wrap

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul,li{
                list-style: none;
            }
            ul{
                width: 500px;
                height: 300px;
                border: 2px solid black;
                display: flex;
            }
            li{
                width: 80px;
                height: 50px;
                border: 2px solid black;
                color: white;
                background-color: red;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </body>
</html>

flex-wrap: nowrap

ul:nth-of-type(1){
                /*換行：不換行（默認(rèn)）*/
                flex-wrap: nowrap;
            }

圖片.png

flex-wrap: wrap

ul:nth-of-type(2){
                /* 換行 */
                flex-wrap: wrap;
            }

圖片.png

flex-wrap: wrap-reverse

ul:nth-of-type(3){
                /* 換行 并第一行在下方*/
                flex-wrap: wrap-reverse;
            }

圖片.png

三、flex-shrink

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul,li{
                list-style: none;
            }
            ul{
                width: 500px;
                height: 300px;
                border: 2px solid black;
                display: flex;
            }
            li{
                width: 80px;
                height: 50px;
                border: 2px solid black;
                color: white;
                background-color: red;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
</html>

justify-content: flex-start

ul:nth-of-type(1){
                /* *主軸方向：左對齊（默認(rèn)） */
                justify-content: flex-start;
            }

圖片.png

justify-content: flex-end

ul:nth-of-type(2){
                /* *主軸方向：右對齊 */
                justify-content: flex-end;
            }

圖片.png

justify-content: center

ul:nth-of-type(3){
                /* *主軸方向：居中對齊 */
                justify-content: center;
            }

圖片.png

justify-content: space-between

ul:nth-of-type(4){
                /* *主軸方向：兩端對齊 */
                justify-content: space-between;
            }

圖片.png

justify-content: space-around

ul:nth-of-type(5){
                /* *主軸方向：平均分布 */
                justify-content: space-around;
            }

圖片.png

四、align-items

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul,li{
                list-style: none;
            }
            ul{
                width: 500px;
                height: 300px;
                border: 2px solid black;
                display: flex;
            }
            li{
                width: 80px;
                /*height: 50px;*/
                border: 2px solid black;
                color: white;
                background-color: red;
                font-size: 30px;
            }
            </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li style="line-height: 80px;">2</li>
            <li>3</li>
            <li style="line-height: 80px;">4</li>
            <li>5</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
</html>

align-items: flex-start

ul:nth-of-type(1){
                /* 交叉軸對齊方式：頂部對齊 */
                align-items: flex-start;
            }

圖片.png

align-items: flex-end

ul:nth-of-type(2){
                /* 底部對齊 */
                align-items: flex-end;
            }

圖片.png

align-items: center

ul:nth-of-type(3){
                /*居中對齊 */
                align-items: center;
            }

圖片.png

align-items: baseline

ul:nth-of-type(4){
                /* 文本基線對齊 */
                align-items: baseline;
            }

圖片.png

align-items: stretch

ul:nth-of-type(5){
                /*如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。（默認(rèn)） */
                align-items: stretch;
            }

圖片.png

五、align-content

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul,li{
                list-style: none;
            }
            ul{
                width: 500px;
                height: 300px;
                border: 2px solid black;
                display: flex;
            }
            li{
                width: 80px;
                /*height: 50px;*/
                border: 2px solid black;
                color: white;
                background-color: red;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </body>
</html>

align-content: flex-start

ul:nth-of-type(1){
                flex-wrap: wrap;
                /*多主軸對齊： 頂部對齊*/
                align-content: flex-start;
            }

圖片.png

align-content: flex-end

ul:nth-of-type(2){
                flex-wrap: wrap;
                /*底部對齊*/
                align-content: flex-end;
            }

圖片.png

align-content: center

ul:nth-of-type(3){
                flex-wrap: wrap;
                /*居中對齊*/
                align-content: center;
            }

圖片.png

align-content: space-between

ul:nth-of-type(4){
                flex-wrap: wrap;
                /*上下對齊并鋪滿*/
                align-content: space-between;
            }

圖片.png

align-content: space-around

ul:nth-of-type(5){
                flex-wrap: wrap;
                /*均勻分布 上下間距相同*/
                align-content: space-around;
            }

圖片.png

align-content: stretch

ul:nth-of-type(6){
                flex-wrap: wrap;
                /*軸線占滿整個交叉軸     （默認(rèn)）*/
                align-content: stretch;
            }

圖片.png

3.2 項目的屬性

一、order

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>01_order</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul,li{
                list-style: noen;
            }
            ul{
                width:500px;
                height: 300px;
                border: 2px solid black;
                display: flex;
                
            }
            li{
                list-style: none;
                width: 80px;
                height: 50px;
                border: 2px solid black;
                color: white;
                background: orangered;
                font-size: 30px;
            }           
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
</html>

ul li:nth-of-type(2){
                /*order: integer(最大值);  
                 * 排序：數(shù)值越小，越排前，默認(rèn)為0*/
                order:2 ;
            }
ul li:nth-of-type(5){
                order: 4;
            }

圖片.png

二、flex-grow

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>02_flex-grow</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul,li{
                list-style: noen;
            }
            ul{
                width:800px;
                height: 300px;
                border: 2px solid black;
                display: flex;
                
            }
            li{
                list-style: none;
                width: 80px;
                height: 50px;
                border: 2px solid black;
                color: white;
                background: orangered;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
</html>

ul li:nth-of-type(1){
                /*放大：默認(rèn)0（即如果有剩余空間也不放大，值為1則放大，2是1的雙倍大小(約等)，以此類推）*/
                flex-grow: 1;
            }
            ul li:nth-of-type(3){
                flex-grow:2 ;
            }

圖片.png

三、flex-shrink

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>03_flex-shrink</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul,li{
                list-style: noen;
            }
            ul{
                width:500px;
                height: 300px;
                border: 2px solid black;
                display: flex;
                
            }
            li{
                list-style: none;
                width: 80px;
                height: 50px;
                border: 2px solid black;
                color: white;
                background: orangered;
                /*font-size: 30px;*/
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </body>
</html>

ul li:nth-of-type(1){
             /*縮小：如果所有項目的flex-shrink屬性都為1，當(dāng)空間不足時，都將等比例縮小。
              * 如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。
              負(fù)值對該屬性無效。）*/
                flex-shrink: 0;   
            }
            
            ul li:nth-of-type(3){
                flex-shrink:3 ;
            }
            
            ul li:nth-of-type(5){
                flex-shrink: 5;
            }

圖片.png

四、flex-basis

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>04_flex-basis</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul,li{
                list-style: noen;
            }
            ul{
                width:800px;
                height: 300px;
                border: 2px solid black;
                display: flex;
                
            }
            li{
                list-style: none;
                width: 80px;
                height: 50px;
                border: 2px solid black;
                color: white;
                background: orangered;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
</html>

ul li:nth-of-type(1){
                /*flex-basis: <length> | auto;*/ /* default auto */
             /*固定大小：默認(rèn)為0，可以設(shè)置px值，也可以設(shè)置百分比大小*/
                flex-basis:300px;
            }
            
            ul li:nth-of-type(3){
                flex-basis: 20%;
            }
            
            ul li:nth-of-type(5){
                flex-basis: auto;
            }

圖片.png

五、align-self

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>05_align-self</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            ul,li{
                list-style: noen;
            }
            ul{
                width:500px;
                height: 300px;
                border: 2px solid black;
                display: flex;
                
            }
            li{
                list-style: none;
                width: 80px;
                /*height: 50px;*/
                border: 2px solid black;
                color: white;
                background: skyblue;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </body>
</html>

ul li:nth-of-type(1){
                /*單獨對齊方式：  自動（默認(rèn)）*/
                align-self: auto;
            }
            
            ul li:nth-of-type(2){
                
                /*頂部對齊*/
                align-self: flex-start;
            }
            
            ul li:nth-of-type(3){
                /*底部對齊*/
                align-self: flex-end;
            }
             
            ul li:nth-of-type(4){
                /*居中對齊*/
                align-self: center;
            }
            
            ul li:nth-of-type(5){
                height:100px;
                /*文本基線對齊*/
                align-self: baseline;
            }
            
            ul li:nth-of-type(6){
            /*  flex-flow: wrap;*/
                /*上下對齊并鋪滿*/
                align-self: stretch;
            }
            ul li:nth-of-type(7){
                height: 30px;
                line-height: 50px;
                align-self: baseline;
            }

圖片.png

4. 結(jié)束語

這寫的很亂，我看著都亂湊合看吧！！！

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Flex語法——彈性布局

0. 前言

1. 基本概念

2. 標(biāo)簽屬性

容器的屬性

項目的屬性

3. 代碼實現(xiàn)

3.1 容器的屬性

一、flex-direction

flex-direction: row

flex-direction: row-reverse

flex-direction: column

flex-direction: column-reverse

二、flex-wrap

flex-wrap: nowrap

flex-wrap: wrap

flex-wrap: wrap-reverse

三、flex-shrink

justify-content: flex-start

justify-content: flex-end

justify-content: center

justify-content: space-between

justify-content: space-around

四、align-items

align-items: flex-start

align-items: flex-end

align-items: center

align-items: baseline

align-items: stretch

五、align-content

align-content: flex-start

align-content: flex-end

align-content: center

align-content: space-between

align-content: space-around

align-content: stretch

3.2 項目的屬性

一、order

二、flex-grow

三、flex-shrink

四、flex-basis

五、align-self

4. 結(jié)束語

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

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频