移動Web開發必備基礎（flex容器屬性）

来源:https://www.cnblogs.com/chenyingying0/archive/2020/03/14/12492285.html
-Advertisement-
Play Games

box-sizing 在pc端一般使用預設值 content-box 在移動端一般使用 border-box <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w ...


box-sizing

在pc端一般使用預設值  content-box

在移動端一般使用 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>

 

移動端通用寫法：

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

 

圖標字體：

阿裡巴巴矢量圖標庫 https://www.iconfont.cn/

選中圖標後添加至項目，然後下載至本地

 

 

<!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項目(flex item)：子元素（不包括孫子元素）

 

 

flex容器的屬性：

div元素預設是塊元素，垂直排列

使用flex或者inline-flex佈局之後，會自動水平排列

在沒有設置容器寬度的情況下，flex的寬度是100%，而inline-flex的寬度取決於項目總寬度

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

<!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 預設水平軸為主軸，左邊開始右邊結束

row-reverse 水平軸為主軸，右邊開始左邊結束

column 垂直軸為主軸，上邊開始下邊結束

column-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-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 一行排不下時是否換行

nowrap 不換行，進行壓縮（預設值）

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"
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JavaScript中window.open()打開與window.close()關閉
    在JavaScript中window.open([URL], [視窗名稱], [參數字元串])打開新的視窗，使用window.close();//關閉本視窗或者是<視窗對象>.close();//關閉指定的視窗，舉例var ceshi=window.open('https://www.cnblogs... ...
  • JavaScript-打開新視窗（window.open）
    通過window.open() 設置瀏覽器視窗；具體語法為window.open([URL], [視窗名稱], [參數字元串])；其中視窗名稱：可選參數，被打開視窗的名稱裡面的"_top"、"_blank"、"_self"具有特殊意義的名稱；參數字元串：可選參數，設置視窗參數，各參數用逗號隔開,引號... ...
  • 移動端常用單位（%和rem）
    px % em （ font-size的值就是 1em，如果自身沒有設置font-size，則去找父元素的；常用於 text-indent:2em 來縮進兩個字元 ） rem（html的font-size的大小，就是1rem ；rem是相對於根元素<html>，即rem繼承的是html的font-s ...
  • CSS中使用animation-timing-function：steps(num，start/end)實現逐幀動畫
    用animation做動畫時發現背景圖片是直接平移運動到指定位置的，即具有連續性，而animation-timing-function：steps(num，start/end)屬性可以使背景圖片運動不連續，即實現逐幀動畫。 steps(num，start/end) 第一個值num表示把動畫分成了多少 ...
  • 移動Web開發必備基礎之媒體查詢
    媒體類型： all （預設值） screen print 列印設備 speech 屏幕閱讀器 由於all是預設值可不寫，因此以下兩種寫法效果相同 @media all and (min-width:900px){ } @media (min-width:900px){ } 媒體查詢中的邏輯 與 或 ...
  • flex佈局實例--實現底部導航
    vh 存在相容性問題，不建議使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user ...
  • 移動Web開發必備基礎（flex項目屬性）
    前提：父容器設置了display:flex 或 inline-flex order 項目的排列順序 預設是0，數字越小，排在越前面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
  • 轉-webpack學習筆記--整體配置結構
    前端學習一段時間後，尤其是工作2-3年的小伙伴們在面試中都會害怕被問到webpack,我也害怕，每次都是臨時抱佛腳，雖然自己會簡單的配置webpack但是對webpack的原理還是一知半解，無意中看到這篇文章寫的還不錯，所以轉發過來，也方便自己學習和記錄。 const path = require( ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類