彈性盒佈局實例_ZenDei技術網路在線

彈性盒佈局實例

-Advertisement-

今天給大家搞一個彈性盒佈局的實例，最近一直在複習一些基礎的東西，所以一直會跟大家分享一些基礎的東西說實話，最近感覺被掏空了，別問我為什麼，誰去保健誰知道，哈哈，註意安全，好了步入正題，今天用彈性盒寫了一個小例子，關於彈性盒的一些基礎我就不列舉了，大家有需要可以去 http://www.ruany ...

　　今天給大家搞一個彈性盒佈局的實例，最近一直在複習一些基礎的東西，所以一直會跟大家分享一些基礎的東西

　　說實話，最近感覺被掏空了，別問我為什麼，誰去保健誰知道，哈哈，註意安全，好了步入正題，今天用彈性盒寫了一個小例子，

　　關於彈性盒的一些基礎我就不列舉了，大家有需要可以去 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 阮一峰大佬的網站去看看

　　他已經寫的非常詳細了，好，那我們來直接舉慄

　　老規矩，我還是把代碼扔上來，大家可以自己拉下去玩一下

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        *{margin: 0;padding: 0}
        /* box的樣式 */
        .box{
            height: 300px;
            width: 100%;
            background: oldlace;
            margin: 150px auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        /* box下div的樣式 */
        .box>div{
            width: 130px;
            height: 130px;
            background-color: black;
            display: flex;
            padding: 20px;
        }
        /* span的樣式 */
        span{
            height: 25px;
            width: 25px;
            background-color: white;
            border-radius: 50%;
        }
        /*寫篩子*/

        /* 第一個篩子面 */
        .a1{
            /* 控制主軸的排列 */
            justify-content: center;
            /* 控制副軸的排列 */
            align-items: center;
        }

        /* 第二個篩子面 */
        .a2{
            /* 將主軸改變為列 */
            flex-direction: column;

            justify-content: space-around;
            align-items: center
        }
        /* 第三個篩子面 */
        .a3{
            justify-content: space-between;
        }
        .a3>span:nth-of-type(2){
            align-self: center;
        }
        .a3>span:nth-of-type(3){
            align-self: flex-end;
        }
        /* 第四個篩子面 */
        .a4{
            justify-content: space-around;
        }
        .a4>div{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        /* 第五個篩子面 */
        .a5{
            justify-content: space-around;
        }
        .a5>div{
            display: flex;
            flex-direction: column;
            justify-content:space-around;
        }

        /*第六個篩子面*/
        .a6{
            justify-content: space-around;
        }
        .a6>div{
            display:flex;
            flex-direction: column;
            justify-content: space-around;
        }

    </style>
</head>
<body>
    <div class="box">
        <!-- 第一個div -->
        <div class="a1"><span></span></div>
        <!-- 第二個div -->
        <div class="a2"><span></span><span></span></div>
        <!-- 第三個div -->
        <div class="a3"><span></span><span></span><span></span></div>
        <!-- 第四個div -->
        <div class="a4">
                <div><span></span><span></span></div>
                <div><span></span><span></span></div>
           </div>
        <!-- 第五個div -->
        <div class="a5">
                <div><span></span><span></span></div>
                <div><span></span></div>
                <div><span></span><span></span></div>
        </div>
        <!-- 第六個div -->
        <div class="a6">
                <div><span></span><span></span><span></span></div>
                <div><span></span><span></span><span></span></div>
        </div>
    </div>
</body>
</html>

哇，這木長的代碼，你竟然能看到這裡，太感動了，抓緊聯繫我好吧，我帶你保健去

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

轉MySQL遇到的語法差異及解決方案

最近公司項目需要從SQL Server轉到MySQL，在轉的過程中遇到兩者語法之間的一些差異，在網上找瞭解決方案後，特記錄在此。由於解決方案可能有很多種，我只記錄了自己使用過的，僅作參考。 1. 拼接字元串使用方法 MSSQL MySQL 2. MySQL中和update set select ...
《看書總結》

...
AIDL使用以及原理分析

AIDL使用以及IPC原理分析（進程間通信）概要為了大家能夠更好的理解android的進程間通信原理，以下將會從以下幾個方面講解跨進程通訊信： 1. 必要瞭解的概念 2. 為什麼要使用aidl進程間通信 3. 可能遇到的問題以及解決辦法 4. aidl的使用，通過android提供的aidl實現 ...
【OC底層】OC對象本質,如 isa, super-class

Objective-C的本質 Objective-C的本質 1、我們編寫的Objective-C，底層現實都是C/C++，代碼生成步驟如下： 1、我們編寫的Objective-C，底層現實都是C/C++，代碼生成步驟如下： 2、在OC中的所有面向對象的實現，都是基於C/C++的數據結構實現的 3、將 ...
解決瀏覽器自動填充input

瀏覽器輸入框自動填充解決辦法 emmmmm；今天處理公司後臺系統遇到的；登錄頁面瀏覽器保存賬號密碼後；瀏覽器會自動在其他頁面進行填充；解決如下圖：瀏覽器會預設填充input type值為password的文本框；（填充對象為input[type=password]及前一個input框）先設置in ...
移動端適配（3）---rem適配

rem適配 <meta name="viewport" content="width=device-width,user-scalable=no"/> <script> (function(){ var html=document.documentElement; var hWidth=html.g ...
前端XSS相關整理

前端安全方面，主要需要關註 XSS（跨站腳本攻擊 Cross-site scripting）和 CSRF（跨站請求偽造 Cross-site request forgery）當然了，也不是說要忽略其他安全問題：後端範疇、DNS劫持、HTTP劫持、加密解密、釣魚等 CSRF主要是借用已登錄用戶之手 ...
九月前端面試筆試總結記錄

本文記錄並總結了一些九月本人參加面試當中遇到的題目，由於本人水平也有限，這些題目對應的解答一些是我自己的思路或者回來之後進行查閱總結得到的，可能並非最佳答案。分享出來給大家參考，如果出現錯誤，請大佬們多多見諒並勘誤，感謝。 9.4 面試題目 1. 數字如何轉換成字元串？使用 toString() ...