免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP，暢享免費(fèi)電子書(shū)等14項(xiàng)超值服

開(kāi)通VIP

首頁(yè)

好書(shū)

留言交流

下載APP

聯(lián)系客服
移動(dòng)Web開(kāi)發(fā)必備基礎(chǔ)（flex容器屬性）

box-sizing

在pc端一般使用默認(rèn)值  content-box

在移動(dòng)端一般使用 border-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>Document</title>
    <style>
        .parent{width:100%;}
        .child{width:50%;height:30px;float:left;}
        .parent .child{background-color: pink;border:1px solid #333;box-sizing:content-box;}
        .parent2 .child{background-color: #abcdef;border:1px solid #333;box-sizing:border-box;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
    </div>
    <div class="parent2">
        <div class="child"></div>
        <div class="child"></div>
    </div>
    <script>

    </script>
</body>
</html>

 

移動(dòng)端通用寫(xiě)法：

*{margin:0;padding:0;box-sizing:border-box;}

 

圖標(biāo)字體：

阿里巴巴矢量圖標(biāo)庫(kù) https://www.iconfont.cn/

選中圖標(biāo)后添加至項(xiàng)目，然后下載至本地

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        .iconfont{font-size:30px;}
        .icon-gouwuche{color:rgb(234,58,67);}
        .icon-file{color:rgb(244,189,0);}
        .icon-saomiao{color:rgb(42,83,205)}
        .icon-xialajiantou{color:rgb(85,85,85);}
    </style>
</head>
<body>
    <div class="parent">
        <i class="iconfont icon-gouwuche"></i>
        <i class="iconfont icon-file"></i>
        <i class="iconfont icon-saomiao"></i>
        <i class="iconfont icon-xialajiantou"></i>
    </div>
    </div>
    <script>

    </script>
</body>
</html>

 

 

flex布局

彈性布局 彈性盒子布局

flex容器(flex container)：父元素 display:flex |  inline-flex;

flex項(xiàng)目(flex item)：子元素（不包括孫子元素）

 

 

flex容器的屬性：

div元素默認(rèn)是塊元素，垂直排列

使用flex或者inline-flex布局之后，會(huì)自動(dòng)水平排列

在沒(méi)有設(shè)置容器寬度的情況下，flex的寬度是100%，而inline-flex的寬度取決于項(xiàng)目總寬度

在設(shè)置容器寬度的情況下，二者的容器寬度相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        .child{width:100px;height:100px;background:orange;border:1px solid #333;margin:2px;}
        .parent{background:#abcdef;}
        .parent1{display: flex;}
        .parent2{display: inline-flex;}
    </style>
</head>
<body>
    <div class="parent parent1">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
    <div class="parent parent2">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>

</body>
</html>

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        .child{width:100px;height:100px;background:orange;border:1px solid #333;margin:2px;}
        .parent{background:#abcdef;width:100%;}
        .parent1{display: flex;}
        .parent2{display: inline-flex;}
    </style>
</head>
<body>
    <div class="parent parent1">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
    <div class="parent parent2">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>

</body>
</html>

 

 

flex-direction 決定主軸方向

row 默認(rèn)水平軸為主軸，左邊開(kāi)始右邊結(jié)束

row-reverse 水平軸為主軸，右邊開(kāi)始左邊結(jié)束

column 垂直軸為主軸，上邊開(kāi)始下邊結(jié)束

column-reverse 垂直軸為主軸，下邊開(kāi)始上邊結(jié)束

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        .child{width:100px;height:100px;background:orange;border:1px solid #333;margin:2px;}
        .parent{background:#abcdef;display: flex;}
        .parent1{flex-direction:row;}
        .parent2{flex-direction:row-reverse;}
        .parent3{flex-direction:column;}
        .parent4{flex-direction:column-reverse;}
    </style>
</head>
<body>
    <div class="parent parent1">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
    <div class="parent parent2">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
    <div class="parent parent3">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
    <div class="parent parent4">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>

</body>
</html>

 

 

 

 

 

 

 

 

flex-wrap 一行排不下時(shí)是否換行

nowrap 不換行，進(jìn)行壓縮（默認(rèn)值）

wrap 換行

wrap-reverse 換行的排在前面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        .child{width:100px;height:100px;background:orange;border:1px solid #333;margin:2px;}
        .parent{background:#abcdef;display: flex;}
        .parent1{flex-wrap:nowrap;}
        .parent2{flex-wrap:wrap;}
        .parent3{flex-wrap:wrap-reverse;}
    </style>
</head>
<body>
    <div class="parent parent1">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
        <div class="child">8</div>
        <div class="child">9</div>
        <div class="child">10</div>
        <div class="child">11</div>
        <div class="child">12</div>
    </div>
    <div class="parent parent2">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
        <div class="child">8</div>
        <div class="child">9</div>
        <div class="child">10</div>
        <div class="child">11</div>
        <div class="child">12</div>
    </div>
    <div class="parent parent3">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
        <div class="child">8</div>
        <div class="child">9</div>
        <div class="child">10</div>
        <div class="child">11</div>
        <div class="child">12</div>
    </div>

</body>
</html>

 

 

 

 

 

 

flex-flow 是flex-direction和flex-wrap的簡(jiǎn)寫(xiě)

如：flex-flow:row wrap;

 

justify-content 項(xiàng)目在主軸上的對(duì)齊方式

flex-start 整體左對(duì)齊

flex-end 整體右對(duì)齊

center 整體居中對(duì)齊

space-between 兩端對(duì)齊

space-around 每個(gè)項(xiàng)目的左右間距相等（項(xiàng)目之間的間距是項(xiàng)目與邊框的間距的2倍）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        .child{width:100px;height:100px;background:orange;border:1px solid #333;margin:2px;}
        .parent{background:#abcdef;display: flex;}
        .parent1{justify-content:flex-start;}
        .parent2{justify-content:flex-end;}
        .parent3{justify-content:center;}
        .parent4{justify-content:space-between;}
        .parent5{justify-content:space-around;}
    </style>
</head>
<body>
    <div class="parent parent1">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
    <div class="parent parent2">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
    <div class="parent parent3">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
    <div class="parent parent4">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
    <div class="parent parent5">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>

</body>
</html>

 

 

 

 

 

 

 

 

 

 

align-items 在交叉軸上的排列方式

flex-start 上邊對(duì)齊

flex-end 下邊對(duì)齊

center 居中對(duì)齊

baseline 基線對(duì)齊

stretch 默認(rèn)值，如果項(xiàng)目沒(méi)有設(shè)置高度，或者高度設(shè)置為auto，則默認(rèn)占滿整個(gè)容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        .child{width:100px;height:100px;background:orange;border:1px solid #333;margin:2px;}
        .parent{background:#abcdef;display: flex;}
        .parent .child:nth-child(even){height:130px;}
        .parent1{align-items:flex-start;}
        .parent2{align-items:flex-end;}
        .parent3{align-items:center;}
        .parent4{align-items:baseline;}
        .parent5 .child{height:auto;}
        .parent5{align-items:stretch;}
    </style>
</head>
<body>
    <div class="parent parent1">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
    <div class="parent parent2">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
    <div class="parent parent3">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
    <div class="parent parent4">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
    <div class="parent parent5">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>

</body>
</html>

 

 

 

 

 

 

 

 

 

 

align-content 交叉軸的對(duì)齊方式（針對(duì)多行，如果單行是不起作用的）

將所有項(xiàng)目看成一個(gè)整體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        .child{width:100px;height:100px;background:orange;border:1px solid #333;margin:2px;}
        .parent{background:#abcdef;display: flex;flex-wrap:wrap;height:300px;border:1px solid;}
        .parent1{align-content:flex-start;}
        .parent2{align-content:flex-end;}
        .parent3{align-content:center;}
        .parent4{align-content:space-between;}
        .parent5{align-content:space-around;}
        .parent6 .child{height:auto;}
        .parent6{align-content:stretch;}
    </style>
</head>
<body>
    <div class="parent parent1">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
        <div class="child">8</div>
    </div>
    <div class="parent parent2">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
        <div class="child">8</div>
    </div>
    <div class="parent parent3">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
        <div class="child">8</div>
    </div>
    <div class="parent parent4">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
        <div class="child">8</div>
    </div>
    <div class="parent parent5">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
        <div class="child">8</div>
    </div>
    <div class="parent parent6">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
        <div class="child">6</div>
        <div class="child">7</div>
        <div class="child">8</div>
    </div>

</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。
打開(kāi)APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
移動(dòng)Web開(kāi)發(fā)必備基礎(chǔ)（flex項(xiàng)目屬性）
CSS實(shí)現(xiàn)盒子模型水平居中、垂直居中、水平垂直居中的多種方法
CSS常見(jiàn)布局解決方案
flex兼容性寫(xiě)法
基于swiper的Tab選項(xiàng)卡
史上最全Html與CSS布局技巧
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點(diǎn)擊這里聯(lián)系客服！

聯(lián)系客服