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

搜索
博主信息
博文 13
粉絲 0
評(píng)論 0
訪問量 16512
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
flex學(xué)習(xí)一
小追
原創(chuàng)
837人瀏覽過

flex彈性盒子學(xué)習(xí)一

話不多說，上代碼：

1.flex單行容器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Flexbox彈性盒布局快速預(yù)覽</title>
  7.     <style>
  8.         .container{
  9.             width:800px;
  10.             /* 轉(zhuǎn)為flexbox彈性盒子 */
  11.             /* 如果這個(gè)容器中的內(nèi)容要使用彈性盒子布局，首先需要將這個(gè)容器轉(zhuǎn)化為flex彈性盒子 */
  12.             display:flex;
  13.         }
  14.         /* 只在一行顯示flex：auto可以自動(dòng)平均彈性項(xiàng)目大小 */
  15.         .container>.item{
  16.             /* 一但將父元素轉(zhuǎn)換為彈性容器，容器內(nèi)的子元素（子元素的子元素不行）就會(huì)自動(dòng)成為彈性項(xiàng)目 */
  17.             /* 不管這個(gè)項(xiàng)目標(biāo)簽之前是什么類型，統(tǒng)統(tǒng)轉(zhuǎn)為行內(nèi)塊 */
  18.             /* 行內(nèi)塊是一行內(nèi)顯示可以設(shè)置寬高 */
  19.             flex:auto; 
  20.             /* width:60px;
  21.             height:66px; */
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <!-- 快速實(shí)現(xiàn).container>.item{$}*3 -->
  27.     <div class="container">
  28.         <div class="item">1</div>
  29.         <div class="item">2</div>
  30.         <div class="item">3</div>
  31.         <div class="item">4</div>
  32.         <div class="item">5</div>
  33.         <div class="item">6</div>
  34.     </div>
  35. </body>
  36. </html>

2.flex多行容器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Flexbox彈性盒多行容器</title>
  7.     <style>
  8.         .container{
  9.             width: 600px;
  10.             display:flex;
  11.         }
  12.         /* 多行的時(shí)候要計(jì)算彈性容器的寬度和彈性項(xiàng)目的寬度，留下剩余空間不好看 */
  13.         .container>.item{
  14.             flex:auto; 
  15.             width:150px;
  16.         }
  17.         .container{
  18.             flex-wrap:wrap;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <!-- 快速實(shí)現(xiàn).container>.item{$}*3 -->
  24.     <div class="container">
  25.         <div class="item">1</div>
  26.         <div class="item">2</div>
  27.         <div class="item">3</div>
  28.         <div class="item">4</div>
  29.         <div class="item">5</div>
  30.         <div class="item">6</div>
  31.     </div>
  32. </body>
  33. </html>

3.flex單行容器項(xiàng)目對(duì)齊

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>單行容器的項(xiàng)目對(duì)齊</title>
  7.     <style>
  8.         .container{
  9.             width:300px;
  10.             display:flex;
  12.             /* justify-content:設(shè)置容器中的剩余空間在所有項(xiàng)目之間的分配方案 */
  14.             /* 1.容器剩余空間在所有項(xiàng)目兩邊如何分配，將所有項(xiàng)目視為一個(gè)整體 */
  15.             /* 開頭對(duì)齊 */
  16.             justify-content:flex-start;
  17.             /* 不建議向下面兩種方式寫 */
  18.             /* justify-content:start; */
  19.             /* justify-content:left; */
  20.             /* 末尾對(duì)齊 */
  21.             justify-content:flex-end;
  22.             /* 中間對(duì)齊 */
  23.             justify-content:center;
  25.             /* 2.容器剩余空間在所有項(xiàng)目之間如何分配，將所有項(xiàng)目視為一個(gè)個(gè)的個(gè)體 */
  26.             /* 兩端對(duì)齊 */
  27.             justify-content:space-between;
  28.             /* 分散對(duì)齊   剩余空間在所有項(xiàng)目的兩側(cè)對(duì)齊*/
  29.             justify-content:space-around;
  30.             /* 平均分配 */
  31.             justify-content:space-evenly;
  32.         }
  33.         .item{
  34.             width:60px;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <div class="container">
  40.         <div class="item">1</div>
  41.         <div class="item">2</div>
  42.         <div class="item">3</div>
  43.     </div>
  44. </body>
  45. </html>

4.flex多行容器項(xiàng)目水平對(duì)齊

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>多行容器的項(xiàng)目對(duì)齊主軸為水平時(shí)</title>
  7.     <style>
  8.         .container{
  9.             width:300px;
  10.             display:flex;
  11.             flex-wrap:wrap;
  12.             /* 多行容器要給一下高度 */
  13.             height:150px;
  14.             /* align-content:設(shè)置多行容器中項(xiàng)目的排列方式 */
  15.             /* stretch默認(rèn)值 */
  16.             align-content:stretch;
  17.                         /* 1.容器剩余空間在所有項(xiàng)目兩邊如何分配，將所有項(xiàng)目視為一個(gè)整體 */
  18.             /* 開頭對(duì)齊 */
  19.             align-content:flex-start;
  20.             /* 末尾對(duì)齊 */
  21.             align-content:flex-end;
  22.             /* 中間對(duì)齊 */
  23.             align-content:center;
  25.             /* 2.容器剩余空間在所有項(xiàng)目之間如何分配，將所有項(xiàng)目視為一個(gè)個(gè)的個(gè)體 */
  26.             /* 兩端對(duì)齊 */
  27.             align-content:space-between;
  28.             /* 分散對(duì)齊   剩余空間在所有項(xiàng)目的兩側(cè)對(duì)齊*/
  29.             align-content:space-around;
  30.             /* 平均分配 */
  31.             align-content:space-evenly;
  32.         }
  33.         .item{
  34.             width:60px;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39.     <div class="container">
  40.         <div class="item">1</div>
  41.         <div class="item">2</div>
  42.         <div class="item">3</div>
  43.         <div class="item">4</div>
  44.         <div class="item">5</div>
  45.         <div class="item">6</div>
  46.         <div class="item">7</div>
  47.         <div class="item">8</div>
  48.     </div>
  49. </body>
  50. </html>

5.flex多行容器垂直對(duì)齊

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>多行容器的項(xiàng)目對(duì)齊主軸為垂直時(shí)</title>
  7.     <style>
  8.         .container{
  9.             width:300px;
  10.             height:150px;
  11.             display:flex;
  12.             flex-direction:row;
  13.             flex-direction:column;
  15.             /* 項(xiàng)目兩邊分配 */
  16.             justify-content:flex-start;
  17.             justify-content:flex-end;
  18.             justify-content:center;
  20.             /* 項(xiàng)目之間對(duì)齊 */
  21.             justify-content:space-between;
  22.             justify-content:space-around;
  23.             justify-content:space-evenly;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div class="container">
  29.         <div class="item">1</div>
  30.         <div class="item">2</div>
  31.         <div class="item">3</div>
  32.     </div>
  33. </body>
  34. </html>

6.flex項(xiàng)目在交叉軸排列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>項(xiàng)目在交叉軸排列</title>
  7.     <style>
  8.         .container{
  9.             width:300px;
  10.             display:flex;
  11.             height:200px;
  13.             /* 默認(rèn)項(xiàng)目時(shí)在交叉軸自動(dòng)拉伸的 */
  14.             align-items:stretch;
  16.             align-items:flex-start;
  17.             align-items:flex-end;
  18.             align-items:center;
  19.         }
  20.         .item{
  21.             width:60px;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="container">
  27.         <div class="item">1</div>
  28.         <div class="item">2</div>
  29.         <div class="item">3</div>
  30.     </div>
  31. </body>
  32. </html>

7.flex主軸方向與項(xiàng)目排列的簡寫

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>主軸方向與項(xiàng)目排列的簡寫</title>
  7.     <style>
  8.         .container{
  9.             width:300px;
  10.             display:flex;
  11.             height:50px;
  12.             /* 默認(rèn)值就不用寫出來了
  13.             flex-direction:row;
  14.             flex-wrap:nowrap;
  15.             這一行代碼代替上面兩行
  16.             flex-flow:row nowrap; */
  17.             flex-flow:column wrap;
  18.         }
  19.         .item{
  20.             width:60px;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="container">
  26.         <div class="item">1</div>
  27.         <div class="item">2</div>
  28.         <div class="item">3</div>
  29.         <div class="item">4</div>
  30.         <div class="item">5</div>
  31.     </div>
  32. </body>
  33. </html>

8.用felx快速寫一個(gè)主導(dǎo)航

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>flex彈性容器快速擼一個(gè)主導(dǎo)航</title>
  7.     <style>
  8.         *{
  9.             margin:0;
  10.             padding:0;
  11.             box-sizing:border-box;
  12.         }
  13.         a{
  14.             text-decoration:none;
  15.             color:#ccc;
  16.         }
  17.         nav{
  18.             height:40px;
  19.             background-color:#333;
  20.             padding:0 50px;
  21.             display:flex;
  22.         }
  23.         nav a{
  24.             height:inherit;
  25.             line-height:40px;
  26.             padding:0 15px;
  27.         }
  28.         nav a:hover{
  29.             background-color:lightslategray;
  30.             color:white;
  31.         }
  32.         nav a:last-of-type{
  33.             margin-left:auto;
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38.     <header>
  39.         <nav>
  40.             <a href="">首頁</a>
  41.             <a href="">教學(xué)視頻</a>
  42.             <a href="">社區(qū)問答</a>
  43.             <a href="">資源下載</a>
  44.             <a href>登錄/注冊(cè)</a>
  45.         </nav>
  46.     </header>
  47. </body>
  48. </html>

效果展示：

9.flex項(xiàng)目屬性order控制項(xiàng)目順序

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>項(xiàng)目屬性-order控制項(xiàng)目順序</title>
  7.     <style>
  8.         .container{
  9.             width:300px;
  10.             display:flex;
  11.         }
  12.         .container>.item{
  13.             width:60px;
  14.         }
  15.         .container>.item:first-of-type{
  16.             /* order默認(rèn)值是0 */
  17.             order:3;
  18.         }
  19.         .container>.item:last-of-type{
  20.             order:5;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="container">
  26.         <div class="item">1</div>
  27.         <div class="item">2</div>
  28.         <div class="item">3</div>
  29.     </div>
  30. </body>
  31. </html>

10.order實(shí)例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>order小案列，用戶調(diào)整元素順序</title>
  7.     <style>
  8.         .container{
  9.             width:300px;
  10.             display:flex;
  11.             flex-direction:column;
  12.         }
  13.         .container>.item{
  14.             border:1px solid #000;
  15.             padding:10px;
  16.             display:flex;
  17.             position:relative;
  18.         }
  19.         .container>.item>div{
  20.             display:flex;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="container">
  26.         <div class="item">imag-1<div><button onclick="up(this)">向上</button><button onclick="down(this)">向下</button></div></div>
  27.         <div class="item">imag-2<div><button onclick="up(this)">向上</button><button onclick="down(this)">向下</button></div></div>
  28.         <div class="item">imag-3<div><button onclick="up(this)">向上</button><button onclick="down(this)">向下</button></div></div>
  29.     </div>
  30. </body>
  31. <script>
  32.     let  up=(ele)=>(ele.offsetParent.style.order-=1);
  33.     let down=(ele)=>(ele.offsetParent.style.order+=1);
  34. </script>
  35. </html>

效果展示：

批改老師：天蓬老師天蓬老師

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

老師批語：一旦習(xí)慣了flex, 傳統(tǒng)的float+position都不想碰了
本博文版權(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é)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(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é)