h5學習筆記：flex

阿新 • • 發佈：2019-01-24

flex部署可以很方便佈局橫向和垂直縱向的設計。所以在編寫小程式可以放心使用。
flex 依舊有瀏覽器相容性的問題。但是ie 8 這種瀏覽器真不管太多了。

今晚做一個練習，記錄一下之前工作中用到用法。flex是一種常用佈局方式，使用這種方式處理一些佈局。

line-height 用於文字居中的顯示
flex 的中間距採取了 justify-content:space-between; 均等的方式實現。
flex 採取了換行，橫向排的做法。

採取margin-left 和 margin-right 的做法可以縮短底部描邊的問題，讓左右兩邊預留空間感。

relative 和 absolute的配合用法。相對和絕對配合的使用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
    </head>
    <style>
         body{
            margin: 0;
            padding 
: 0;
         }

        .topbar{
            background-color: orange;
            height: 60px;
            margin-bottom: 20px;
            position: relative;
        }

        .topbar .top-name{

            line-height: 60px;
            margin-left: 15px;
            color: white;
            font-size 
: 18px;
        }

        .topbar .top-money{

            line-height: 60px;
            margin-left: 15px;
            color: white;
            font-size: 18px;
            position: absolute;
            right: 15px;             
        }

        .money{
             margin-top: 30px;
             font-size: 28px;
             border-bottom: 1px solid #000000;
             margin-left: 25px;
             margin-right: 25px;
             padding-bottom: 10px;
        }

        .grids{
             display: flex;
             flex-direction: row;
             flex-wrap: wrap; /*換行*/
             justify-content:space-between;
             margin: 0 15px 0 15px;
        }
        .grid-item{

             width:30%;
             height:30%;
             border: 1px solid #888888; 
             text-align: center;
             line-height: 100px;
             margin-bottom: 15px;

        }

        .active {

            border: 1px solid #FF0000;
            color: red; 
        }
    </style>
    <body>
          <div class="topbar">
             <span class="top-name">張三</span>
             <span class="top-money">剩下30元</span>
          </div>
           <div class="grids">
              <div class="grid-item active">
                  <span>10元</span>
              </div>
              <div class="grid-item">
                 <span>20元</span>
              </div>
              <div class="grid-item">
                 <span>30元</span>
              </div>
                  <div class="grid-item">
                 <span>40元</span>
              </div>
              <div class="grid-item">
                 <span>50元</span>
              </div>
              <div class="grid-item">
                 <span>60元</span>
              </div>

           </div>
           <div>
             <div class="money">支付10元購買</div>
         </div>
    </body>
</html>

這裡寫圖片描述

好，睡覺去。

h5學習筆記：flex

flex部署可以很方便佈局橫向和垂直縱向的設計。所以在編寫小程式可以放心使用。 flex 依舊有瀏覽器相容性的問題。但是ie 8 這種瀏覽器真不管太多了。今晚做一個練習，記錄一下之前工作中用到用法。flex是一種常用佈局方式，使用這種方式處理一些佈局。

h5 學習筆記：記錄一些前端用到後臺和移動樣式庫

這幾天一直在找一些移動和業務樣式庫，發現了不少不錯的，既是漂亮又符合業務用到。前端發展真的變化很快，發現市面上還是有不少開源好用的產品。針對後臺研發的，有阿里ant design、阿里通訊的，還有餓了麼，京東，有贊等等一些庫。我比較喜歡ant design裡面

h5學習筆記： css佈局案例練習

今天練習一下css相關的佈局，沒有寫互動內容。在css佈局中，發現也不少不熟悉的地方。只是沒有形成概念，其次對一些用法比較模糊。日後需要加強一下這些。對平衡的兩個div應該如何處理，還要繼續想想辦法。

h5學習筆記：layui table

最近在做Layui的後臺，發現Layui這個方案也不錯，能夠快速地在後臺直接部署。相比還要配置webpack，Layui jquery體系開箱即用在一些單獨的情況下還是挺不錯的。最近整理一下現在梳理一下Table元件的用法。一、Table 元件 Tabl

h5學習筆記：居中

將之前的用到的記錄一下。以便不時之需。朋友一直和我講css 是不簡單，到目前為此，css發展已經進化到越來越驚人。其實學好css 不容易，也沒有人所說的那樣簡單。css2- css3 – 進化less，sass，postcss，似乎真是越來越多。那天看了一下le

h5學習筆記：使用fis的前端構建工具記錄

這幾天練習一下webpack ，glup的工具使用，發現webpack 配置起來並不是太順利，總是有一種抗拒的，但從vuejs 和react 需要這種配套的方案去解決打包和釋出版本問題。這也是需要挖一下坑，把這塊骨頭啃下來。無意中找到了fis百度的前端構建工

h5學習筆記：vue 路由部署伺服器子目錄問題

《Egret 引擎入門》這兩天一直在查詢vue經過打包後部署伺服器一直顯示不出來的問題。前端沒有報錯，資源載入也很正常。找了很多回答，最後定位在vue的訪問路由出了問題。出現的現象前端vuejs+vue-router+webpack的組合，打包是由w

h5學習筆記：UI庫

自從接觸了web開發以來，每天都會很糾結選什麼UI框架才是比較合適？擺在這個問題面前是一個技術的選型。要想知道，web開發的坑實在太深。不斷地大廠推出開源框架，不斷地發現很多造輪子。或者看到一個比較漂亮就會選。最近我深刻體會到這種矛盾的存在，前段時間一直用j

h5學習筆記：http-server小工具

今天下午遇到一個小問題，下載的專案放置XAMPP二級目錄裡面，資源都會發生錯誤的情況，這個時候為了解決這個辦法，使用了fis3的內建伺服器去處理。使用fis3伺服器也是挺方便的。使用fis3的指令碼首先啟動伺服器，然後將檔案釋出到內建的伺服器。 fis

h5學習筆記：下拉選單

滑鼠經過選單的時候，下拉選單形成起來。這個案例中，有一些比較有趣的事情。首先要了解這種選單設計結構。我們知道ul+li經常組合列表，這種列表既有縱向，也有橫向。列表中的li元素，再包一個ul+li的組合元素。這樣一個列表下拉選單結構就變得很清晰了。

Linux學習筆記：存儲管理

linux 磁盤管理 Linux系統中所有的硬件設備都是通過文件的方式來表現和使用的，我們將這些文件稱為設備文件，在Linux下的/dev目錄中有大量的設備文件，根據設備文件的不同，又分為字符設備文件和塊設備文件。字符設備文件的存取是以字符流的方式來進行的，一次傳送一個字符。常見的有打印

學習筆記：javascript內置對象：數組對象

b- sort splice 刪除分隔 href 結果 join() strong 1.數組對象的創建 1.設置一個長度為0的數組 var myarr=new array(); 2.設置一個長度為n的數組 var myarr=new arr(n); 3.聲明一個

學習筆記：javascript內置對象：日期對象

etsec sel mil cond ava com 描述學習筆記 asp 2.日期對象的常用函數 2.日期對象的常用函數 Date 對象方法方法描述 Date() 返回當日的日期和時間。 getDate() 從 Date 對象返回一個月

Linux學習筆記：btrfs

可擴展性 linux btrfs Technical Preview, 技術預覽版 BtrFS（B-tree文件系統，又稱為Butter FS或Better FS），2007由oracle開源後，得到了IBM、intel等廠商的大力支持，其目標計劃是替代linux目前的ext3/4，成為下

Linux學習筆記：rpm程序包管理

源代碼 rpm 程序包以CentOS為例，rpm程序包管理器的相關內容如下：CentOS的程序包管理器：程序包的命名規則：源代碼包： software_name-VERSION.tar.gz VERSION：major.mino

kafka學習筆記：知識點整理

一個 eight true med 分組 pos 間接 fig ges 一、為什麽需要消息系統 1.解耦：　　允許你獨立的擴展或修改兩邊的處理過程，只要確保它們遵守同樣的接口約束。 2.冗余：　　消息隊列把數據進行持久化直到它們已經被完全處理，通過這一方式規避了數據

Emacs學習筆記：移動

size exp http spc ssi 參考 put kill ati 參考網址：https://www.emacswiki.org/emacs/NavigatingParentheses Navigating over balanced expressions C

Linux學習筆記：OSI七層模型

路由器交換機比特流兼容性 linux OSI七層模型： OSI（Open System Interconnection，開放系統互連）七層網絡模型稱為開放式系統互聯參考模型，是一個邏輯上的定義，一個規範，它把網絡從邏輯上分為了7層。每一層都有相關、相對應的物理設備，比如路由器

Android學習筆記：超能RecyclerView組件使用總結

popu bin view設置 and col cas mda rac data 個人認為 RecyclerView組件確實值得學習並用到我們的項目中去，前面學了相關的內容。今天再補充一些相關的東東。 1，實現對RecyclerView中的數據進行加入和刪除操作。

python學習筆記：字符串

修改結束 () 添加 cnblogs hid src 處理 linu string類型由多個字符組成，可以把字符串看成一個整體，也可以取得字符串中的任何一個部分。函數len() 返回字符串的長度 >>> address = ‘www.baidu.c

h5學習筆記：flex

相關推薦