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

搜索
博主信息
博文 23
粉絲 1
評(píng)論 0
訪(fǎng)問(wèn)量 40597
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
彈性盒子（flex）
Liu
原創(chuàng)
1567人瀏覽過(guò)

一、Flex 容器

1、采用 Flex 布局的元素，稱(chēng)為 Flex 容器（flex container），簡(jiǎn)稱(chēng)”容器”。 

有了彈性盒子, 通常只需要指定元素的:1) 空間分布方式;2)內(nèi)容對(duì)齊方式;3)元素排列順序;

塊級(jí)-彈性容器：

實(shí)例

/*塊級(jí)_彈性容器*/
.fiex{
display:flex
}

行內(nèi)-彈性容器

實(shí)例

/*行內(nèi)_彈性容器*/
.inline-flex{
    display: inline-flex;
}

代碼效果

 

1.png

手抄代碼

1.jpg

 彈性盒子~導(dǎo)航實(shí)列

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>彈性容器（盒子）做導(dǎo)航</title>
    <style>
        a{
            text-decoration: none;
            background-color: lightseagreen;
            color: black;
            padding: 5px 10px;
            margin: 0 5px;
            border-radius: 5px 5px 0 0;
        }

        a:hover,a:focus,a:active{
            background: lightpink;
            color: #fff;

        }
        nav{
            border-bottom: 1px solid #ccc;
            display: flex;
        }
    </style>
</head>
<body>
<nav class="container ">
    <a href="#">首頁(yè)</a>
    <a href="#">課程視頻</a>
    <a href="#">社區(qū)問(wèn)答</a>
    <a href="#">售后服務(wù)</a>
    <a href="#">入門(mén)教程</a>
    <a href="#">資源下載</a>
    <a href="#">PHP工具箱</a>
    <a href="#">聯(lián)系我們</a>
</nav>
</body>
</html>

代碼效果圖

1.png

手寫(xiě)代碼

1.jpg

 

定義彈性容器的主軸方向，彈性元素的主軸

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定義彈性容器的主軸方向，彈性元素的主軸</title>
    <style>
        /*彈性容器的通用樣式*/
        .container{
            border: 2px dashed red;
            margin: 15px;
            background-color: #cdc;
        }

        /*彈性元素的通用樣式*/
        .item{
            box-sizing: border-box;
            border: 1px solid;
            padding: 20px;
            background-color: lightgray;
        }

        /*塊級(jí)彈性盒子/容器*/
        .flex{
            display: flex;
        }
        /*從左到右 默認(rèn)樣式 水平排列*/
        .row{
            flex-direction: row;
        }

        /*默認(rèn)從右到左，水平排列*/
        .row-reverse{
            flex-direction: row-reverse;
        }

        /*默認(rèn)從上到下，垂直排列*/
        .column{
            flex-direction: column;
        }

        /*默認(rèn)從下到上，垂直排列*/
        .column-reverse{
            flex-direction:column-reverse;
        }
    </style>
</head>
<body>
<h3>1、row:默認(rèn)從左到右，水平排列</h3>
<div class="container flex row">
    <span class="item">iteam1</span>
    <span class="item">iteam2</span>
    <span class="item">iteam3</span>
    <span class="item">iteam1</span>
    <span class="item">iteam2</span>
    <span class="item">iteam3</span>
    <span class="item">iteam1</span>
    <span class="item">iteam2</span>
    <span class="item">iteam3</span>
    <span class="item">iteam1</span>
    <span class="item">iteam2</span>
    <span class="item">iteam3</span>
</div>
<h3>2、row-revarse:默認(rèn)從右到左，水平排列</h3>
<div class="container flex row-reverse">
    <span class="item">iteam1</span>
    <span class="item">iteam2</span>
    <span class="item">iteam3</span>
</div>
<h3>3、column:默認(rèn)從上到下，垂直排列</h3>
<div class="container flex column">
    <span class="item">iteam1</span>
    <span class="item">iteam2</span>
    <span class="item">iteam3</span>
</div>
<h3>3、column:默認(rèn)從下到上，垂直排列</h3>
<div class="container flex column-reverse">
    <span class="item">iteam1</span>
    <span class="item">iteam2</span>
    <span class="item">iteam3</span>
</div>
</body>
</html>
代碼效果
1.png

 

手抄代碼

1.jpg

彈性盒子-首頁(yè)布局案例

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網(wǎng)站首頁(yè)案例</title>
    <style>
        *{
            outline:1px solid #cccccc ;/*參考線(xiàn)*/
            margin: 10px;
            padding: 10px;
        }
        a{
            text-decoration: none;
            background-color: lightseagreen;
            color: black;
            padding: 5px 10px;
            margin: 0 5px;
            border-radius: 5px 5px 0 0;
        }

        a:hover,a:focus,a:active{
            background: lightpink;
            color: #fff;

        }
        nav{
            border-bottom: 1px solid #ccc;
            display: flex;
        }
        /*將頁(yè)面的所有布局元素轉(zhuǎn)為flex*/
        body,header,nav,main,article,footer{
            display: flex;
        }
        /*元素在主軸上的排列方式*/
        body,article{
            flex-direction: column;
        }

        footer{
            border-top: 1px solid #ccc;
        }

        nav{
            padding-bottom: 0;
        }
    </style>
</head>
<body>
<header>
    豬哥的博客
</header>
<nav class="container ">
    <a href="#">首頁(yè)</a>
    <a href="#">課程視頻</a>
    <a href="#">社區(qū)問(wèn)答</a>
    <a href="#">售后服務(wù)</a>
    <a href="#">入門(mén)教程</a>
    <a href="#">資源下載</a>
    <a href="#">PHP工具箱</a>
    <a href="#">聯(lián)系我們</a>
</nav>
<main>
    <article>
        <img src="static/images/01.jpg" alt="ThinkPHP6.0極速入門(mén)(視頻教程)">
        <p>ThinkPHP是國(guó)內(nèi)最流行的中文輕量級(jí)開(kāi)發(fā)框架, ThinkPHP6.0是它的最新版本,基于全新的PHP7.1+語(yǔ)法, 充分利于PHP7的高性能, 讓開(kāi)發(fā)工作更上一層樓!</p>
        <button>立即學(xué)習(xí)</button>
    </article>
    <article>
        <img src="static/images/02.jpg" alt="">
        <p>歡迎朋友們加入php自學(xué)的行列，php語(yǔ)言是一門(mén)入門(mén)簡(jiǎn)單，容易上手的通用開(kāi)源腳本語(yǔ)言，《php完全自學(xué)手冊(cè)》能使學(xué)習(xí)者對(duì)php有一個(gè)大致的了解。</p>
        <button>立即學(xué)習(xí)</button>
    </article>
    <article>
        <img src="static/images/03.jpeg" alt="">
        <p>本課程為MYSQL基礎(chǔ)視頻教程，主要講解mysql數(shù)據(jù)庫(kù)基礎(chǔ)、搭建、數(shù)據(jù)類(lèi)型、增刪改查的基本操作等！非常適合mysql初學(xué)者學(xué)習(xí)！</p>
        <button>立即學(xué)習(xí)</button>
    </article>
</main>
<footer>
    <p>Copyright ?2018~2019 PHP中文網(wǎng)</p>
</footer>
</body>
</html>

代碼效果

1.png

手抄代碼

1.jpg

 彈性盒子溢出與創(chuàng)建多行容器

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>彈性盒子溢出與創(chuàng)建多行容器</title>
    <sytle>
        /*彈性容器的通用樣式*/
        .container{
        border: 2px dashed red;
        margin: 15px;
        background-color: #cdc;
        }

        /*彈性元素的通用樣式*/
        .item{
        box-sizing: border-box;
        border: 1px solid;
        padding: 20px;
        background-color: lightgray;
        }

        /*塊級(jí)彈性盒子/容器*/
        .flex{
        display: flex;
        }
        .container{
        width: 500px;
        }

        /*不換行*/
        .nowrap{
        /*flex-direction: row;!*水平方向*!*/
        /*flex-wrap: nowrap;!*不換行*!*/
        flex-flow: row nowrap;
        }

        /*換行*/
        .wrap{
        /*flex-direction: row;*/
        /*flex-wrap: wrap;*/
        flex-flow: row wrap;
        }
        /*反向排列*/
        .wrap-revarse{
        /*flex-direction: row;*/
        /*flex-wrap: wrap-reverse;*/
        flex-flow: row wrap-reverse;
        }
    </sytle>
</head>
<body>
<h1>以主軸水平方向?yàn)槔M(jìn)修演示</h1>
<h3>1、nowrap:默認(rèn)不換行，元素自動(dòng)縮小填充內(nèi)容</h3>
<div class="container flex row nowrap">
    <span class="item">iteam1</span>
    <span class="item">iteam2</span>
    <span class="item">iteam3</span>
    <span class="item">iteam4</span>
    <span class="item">iteam5</span>
    <span class="item">iteam6</span>
    <span class="item">iteam7</span>
    <span class="item">iteam8</span>
    <span class="item">iteam9</span>
    <span class="item">iteam10</span>
    <span class="item">iteam11</span>
</div>
<hr>
<h3>2、wrap:換行，彈性元素超出容器邊界換到下一行顯示</h3>
<div class="container flex row wrap">
    <span class="item">iteam1</span>
    <span class="item">iteam2</span>
    <span class="item">iteam3</span>
    <span class="item">iteam4</span>
    <span class="item">iteam5</span>
    <span class="item">iteam6</span>
    <span class="item">iteam7</span>
    <span class="item">iteam8</span>
    <span class="item">iteam9</span>
    <span class="item">iteam10</span>
    <span class="item">iteam11</span>
</div>

<h3>3、wrap-revarse:換行，彈性元素方向排列</h3>
<div class="container flex row wrap-revarse">
    <span class="item">iteam1</span>
    <span class="item">iteam2</span>
    <span class="item">iteam3</span>
    <span class="item">iteam4</span>
    <span class="item">iteam5</span>
    <span class="item">iteam6</span>
    <span class="item">iteam7</span>
    <span class="item">iteam8</span>
    <span class="item">iteam9</span>
    <span class="item">iteam10</span>
    <span class="item">iteam11</span>
</div>
</body>
</html>

代碼效果

1.png

彈性元素在主軸上水平方向如何分布

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>彈性元素在主軸上如何分布</title>

    <style>
        /*彈性容器的通用樣式*/
        .container{
            border: 2px dashed red;
            margin: 15px;
            background-color: #cdc;
        }

        /*彈性元素的通用樣式*/
        .item{
            box-sizing: border-box;
            border: 1px solid;
            padding: 20px;
            background-color: lightgray;
        }

        /*塊級(jí)彈性盒子/容器*/
        .flex{
            display: flex;
        }
        /*創(chuàng)建一個(gè)換行通用樣式*/
        .wrap{
            flex-wrap: wrap;
        }

        /*flex-stars:主軸起點(diǎn)開(kāi)始排列*/
        .flex-stars{
            justify-content: flex-start;
        }
        /*flex-end:主軸終點(diǎn)開(kāi)始排列*/
        .flex-end{
            justify-content: end;
        }
        /*flex-end:主軸居中排列*/
        .center{
            justify-content: center;
        }

        /*剩余空間分配方案*/
        .space-between{
            justify-content: space-between;
        }
        .space-around{
            justify-content: space-around;
        }
        .space-evenly{
            justify-content: space-evenly;
        }
    </style>
</head>
<body>
<h1>彈性元素在主軸上水平方向如何分布</h1>
<h3>1、flex-stars:主軸起點(diǎn)開(kāi)始排列</h3>
<p>單行</p>
<div class="container flex">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<p>多行</p>
<div class="container flex wrap">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>
<hr>
<h3>1、flex-end:主軸終點(diǎn)開(kāi)始排列</h3>
<p>單行</p>
<div class="container flex flex-end">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<p>多行</p>
<div class="container flex wrap flex-end">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>

<h3>1、center:主軸居中排列</h3>
<p>單行</p>
<div class="container flex center">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<p>多行</p>
<div class="container flex wrap center">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>
<hr>
<h3>1、space-between：首尾空間緊貼起始點(diǎn)，其它元素平均分配</h3>
<p>單行</p>
<div class="container flex center space-between">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<p>多行</p>
<div class="container flex wrap center space-between">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>
<hr>
<h3>1、space-around：每個(gè)元素兩邊的空間是相等的，相鄰空間是元素空間的一倍</h3>
<p>單行</p>
<div class="container flex center space-around">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<p>多行</p>
<div class="container flex wrap center space-around">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>
<hr>
<h3>1、space-evenly：每個(gè)元素左右的距離都是相等的</h3>
<p>單行</p>
<div class="container flex center space-evenly">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>

<p>多行</p>
<div class="container flex wrap center space-evenly">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>
</body>
</html>

代碼效果


使用彈性元素主軸對(duì)齊來(lái)實(shí)現(xiàn)導(dǎo)航排列案例

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用彈性元素主軸對(duì)齊來(lái)實(shí)現(xiàn)導(dǎo)航排列</title>
    <style>
        a{
            text-decoration: none;
            background-color: lightseagreen;
            color: black;
            padding: 5px 10px;
            margin: 0 5px;
            border-radius: 5px 5px 0 0;
        }

        a:hover,a:focus,a:active{
            background: lightpink;
            color: #fff;

        }
        nav{
            border-bottom: 1px solid #ccc;
            display: flex;
            margin-bottom: 5em;
        }
        /*居左*/
        .nav-start{
            justify-content: flex-start;
        }
        /*居右*/
        .nav-end{
            justify-content: flex-end;
        }
        /*居中*/
        .nav-center{
            justify-content: center;
        }
    </style>
</head>
<body>
<nav class="container nav-start">
    <a href="#">首頁(yè)</a>
    <a href="#">課程視頻</a>
    <a href="#">社區(qū)問(wèn)答</a>
    <a href="#">售后服務(wù)</a>
    <a href="#">入門(mén)教程</a>
    <a href="#">資源下載</a>
    <a href="#">PHP工具箱</a>
    <a href="#">聯(lián)系我們</a>
</nav>
<nav class="container nav-end">
    <a href="#">首頁(yè)</a>
    <a href="#">課程視頻</a>
    <a href="#">社區(qū)問(wèn)答</a>
    <a href="#">售后服務(wù)</a>
    <a href="#">入門(mén)教程</a>
    <a href="#">資源下載</a>
    <a href="#">PHP工具箱</a>
    <a href="#">聯(lián)系我們</a>
</nav>
<nav class="container nav-center">
    <a href="#">首頁(yè)</a>
    <a href="#">課程視頻</a>
    <a href="#">社區(qū)問(wèn)答</a>
    <a href="#">售后服務(wù)</a>
    <a href="#">入門(mén)教程</a>
    <a href="#">資源下載</a>
    <a href="#">PHP工具箱</a>
    <a href="#">聯(lián)系我們</a>
</nav>
</body>
</html>

代碼顯示

1.png

手抄代碼

1.jpg

彈性元素在垂直方向（交叉軸）的對(duì)齊方式

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>彈性元素在垂直方向（交叉軸）的對(duì)齊方式</title>
    <style>
        /*彈性容器的通用樣式*/
        .container{
            border: 2px dashed red;
            margin: 15px;
            background-color: #cdc;
        }

        /*彈性元素的通用樣式*/
        .item{
            box-sizing: border-box;
            border: 1px solid;
            padding: 20px;
            background-color: lightgray;
        }

        /*塊級(jí)彈性盒子/容器*/
        .flex{
            display: flex;
        }
        .container{
            width: 500px;
            height: 300px;
        }
        .wrap{
            flex-wrap: wrap;
        }
        /*單行容器*/
        /*align-items:設(shè)置單行容器中元素在垂直軸上的排序*/
        .stretch{
            align-items: stretch;
        }
        .flex-strats{
            align-items: flex-start;
        }
        .flex-end{
            align-items: flex-end;
        }
        .center{
            align-items: center;
        }

        /*多行容器*/
        /*align-content：設(shè)置多行容器中彈性元素的對(duì)齊方式和空間的分配方案*/
        .wrap-stretch{
            align-content:stretch ;
        }
        .wrap-flex-starts{
            align-content: flex-start;
        }

        .wrap-flex-end{
            align-content: flex-end;
        }

        .wrap-flex-center{
            align-content: center;
        }
    </style>
</head>
<body>
<h1>彈性盒子在垂直軸上的分布樣式</h1>
<h3>1.stretch:默認(rèn)值，元素的高度自動(dòng)拉伸充滿(mǎn)整個(gè)容器</h3>
<p>單行容器</p>
<div class="container flex stretch">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>

</div>
<p>多行容器</p>
<div class="container flex wrap stretch">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<hr>
<h3>2.flex-strats:元素緊貼起點(diǎn)</h3>
<p>單行容器</p>
<div class="container flex flex-strats">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>

</div>
<p>多行容器</p>
<div class="container flex wrap wrap-flex-starts">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<hr>
<h3>3.flex-end:元素緊貼容器終點(diǎn)</h3>
<p>單行容器</p>
<div class="container flex flex-end">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>

</div>
<p>多行容器</p>
<div class="container flex wrap wrap-flex-end">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
<hr>
<h3>4.center:元素作為整體在容器中垂直居中</h3>
<p>單行容器</p>
<div class="container flex center">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>

</div>
<p>多行容器</p>
<div class="container flex wrap wrap-flex-center">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
</div>
</body>
</html>

代碼效果



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

老師批語(yǔ)：看得出 你的作業(yè)本快用完了, 寫(xiě)了不少了
本博文版權(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)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線(xiàn)php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)