国产精品亚洲一区二区三区在线,亚洲成av人影院

首頁(yè) > 博客列表 > CSS彈性布局（flex）快速入門(mén)和實(shí)操

博主信息

博文 145

粉絲 7

評(píng)論 7

訪問(wèn)量 198717

專(zhuān)題推薦

更多>

相關(guān)推薦

CSS彈性布局基礎(chǔ)知識(shí)：

Flex容器屬性：

1、 flex-direction:row/colum:主軸方向，默認(rèn)主軸為行，
2、 flex-wrap:nowrap/wrap;默認(rèn)不換行
3、 flex-flow:簡(jiǎn)寫(xiě)direction和wrap;
4、 justify-content:flex-start/center/flex-end和space-between/space-evenly/space-around;
主軸上項(xiàng)目對(duì)其方式和排列方式
5、 align-items:flex-start/center/flex-end；項(xiàng)目在交叉軸上的對(duì)其方式
6、 align-content: space-between/space-evenly/space-around: 項(xiàng)目在交叉軸上多行時(shí)的排列方式

Flex項(xiàng)目屬性：

1、 order:為項(xiàng)目編號(hào)（int）,值越小越靠前排列
2、 flex-grow/shrink/basis: grow/shrink的值為比例分配：0~1； basis:項(xiàng)目占據(jù)的主軸空間。簡(jiǎn)寫(xiě)：flex:0,0 auto;
3、 aglin-self:某個(gè)特定項(xiàng)目的對(duì)齊方式；值為：flex-start、center、flex-end;

實(shí)戰(zhàn)練習(xí)：

1、flex個(gè)屬性練習(xí)：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex布局小案例</title>
    <style>
        .box{
            /* width: 40em; */
            /* height: 15em; */
            background-color: lightgray;
            display: flex;
            /* 存在剩空間可以通過(guò)space-between|space-evenly|space-around 來(lái)分配剩余空間*/
            /* justify-content: space-between;
            justify-content: space-around;
            justify-content: space-evenly; */
            flex-flow:row nowrap;
            align-items:flex-end;
            /* 存在多行時(shí)，副軸存在剩余空間時(shí)，通過(guò)space-between|space-evenly|space-around 來(lái)分配剩余空間 */
            align-content: space-around;
        }
        .box .item{
            width:200px;
            height:30px;
            flex-grow: 1;
            flex-shrink:0;
        /* 設(shè)置元素自動(dòng)伸縮簡(jiǎn)寫(xiě)：grow shrink basis */
            flex:1;/*等同于1,1,auto*/
            flex:none;/*等同于0 0 auto*/
            flex:initial;/*等同于 0 1 auto*/
        }
        .box .item:nth-of-type(2n+1){
            background-color: lightseagreen;
        }
        .box .item:nth-of-type(2n){
            background-color: lightskyblue;
        }
        .box .item:nth-child(1){
            order:4;
        }
        .box .item:nth-child(3){
            order:5;
            /* 設(shè)置第三個(gè)為基本寬度為 300px */
            flex-basis:300px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item">01</div>
        <div class="item">02</div>
        <div class="item">03</div>
        <div class="item">04</div>
    </div>
</body>
</html>

2、效果圖：

批改老師：

天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！

全部評(píng)論文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議

0條評(píng)論

作者最新博文

12月29日練習(xí)：php中文網(wǎng)footer案例（組件footer）

2019-12-29 13:35:19

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

CSS彈性布局基礎(chǔ)知識(shí)：

Flex容器屬性：

Flex項(xiàng)目屬性：

實(shí)戰(zhàn)練習(xí)：