彈性佈局--flex方向_ZenDei技術網路在線

彈性佈局--flex方向

-Advertisement-

flex方向 flex方向由flex-direction特性決定,用於定義彈性佈局模式。flex-direction共有4種模式：從左向右、從右向左、從上往下、從下往上。主軸主軸的起點與終點定義了容器元素的開始和結束邊緣。交叉軸交叉軸的起點與終點定義了容器的頂部與底部。從左向右：flex- ...

flex方向

flex方向由flex-direction特性決定,用於定義彈性佈局模式。flex-direction共有4種模式：從左向右、從右向左、從上往下、從下往上。

主軸

主軸的起點與終點定義了容器元素的開始和結束邊緣。

交叉軸

交叉軸的起點與終點定義了容器的頂部與底部。

從左向右：flex-direction:row

主軸：水平方向；交叉軸：垂直方向。

從右向左：flex-direction: row-reverse（flex-direction:row的反向）

從上往下：flex-direction: column

主軸：垂直方向；交叉軸：水平方向。

從下往上： flex-direction: column-reverse（flex-direction: column反向）

註意：flexbox彈性佈局不存在高、寬、水平、垂直等屬性值。盒子模型的大小終於由瀏覽器計算得到。flexbox不會自己換行的，空間不夠會自動伸縮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0px;
        }

        .flexbox-row{
            display: flex;
            flex-direction: row;
        }
        .box{
            width: 50px;
            height: 50px;
        }
        .flexbox-column{
            display: flex;
            flex-direction: column;
        }
        .flexbox-row-reverse{
            display: flex;
            flex-direction: row-reverse;
        }
        .flexbox-column-reverse{
            display: flex;
            flex-direction: column-reverse;
        }
    </style>
</head>
<body>
<!-- 從左向右 -->
<div class="flexbox-row">
    <div class="box" style="background-color:coral;">A</div>
    <div class="box" style="background-color:lightblue;">B</div>
    <div class="box" style="background-color:khaki;">C</div>
    <div class="box" style="background-color:pink;">D</div>
    <div class="box" style="background-color:lightgrey;">E</div>
    <div class="box" style="background-color:lightgreen;">F</div>
</div>

<!-- 從上往下 -->
<div class="flexbox-column">
    <div class="box" style="background-color:coral;">A</div>
    <div class="box" style="background-color:lightblue;">B</div>
    <div class="box" style="background-color:khaki;">C</div>
    <div class="box" style="background-color:pink;">D</div>
    <div class="box" style="background-color:lightgrey;">E</div>
    <div class="box" style="background-color:lightgreen;">F</div>
</div>
<div class="flexbox-row"></div>
<!-- 從右往左 -->
<div class="flexbox-row-reverse">
    <div class="box" style="background-color:coral;">A</div>
    <div class="box" style="background-color:lightblue;">B</div>
    <div class="box" style="background-color:khaki;">C</div>
    <div class="box" style="background-color:pink;">D</div>
    <div class="box" style="background-color:lightgrey;">E</div>
    <div class="box" style="background-color:lightgreen;">F</div>
</div>

<!-- 從下往上 -->
<div class="flexbox-column-reverse">
    <div class="box" style="background-color:coral;">A</div>
    <div class="box" style="background-color:lightblue;">B</div>
    <div class="box" style="background-color:khaki;">C</div>
    <div class="box" style="background-color:pink;">D</div>
    <div class="box" style="background-color:lightgrey;">E</div>
    <div class="box" style="background-color:lightgreen;">F</div>
</div>
</body>
</html>

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

-Advertisement-

更多相關文章

iOS MJRefresh使用

前言： MJRefresh是iOS開發的一個表視圖上下拉刷新的框架，該框架使用非常廣泛，使用該框架的APP有騰訊微博、139郵箱、順豐速運、人民日報、直銷銀行、山西日報等等。該框架在表視圖刷新載入新數據的使用上非常方便。集成方法： CocoaPods：pod 'MJRefresh' 使用範圍： ...
四種傳值方法（通知、block、屬性、NSUserDefaults）

1、通知傳值-一般常用於返回界面的時候，把返回前界面的值傳到返回後界面。 2、block 反向傳值前一個界面獲取後一個界面傳過來的值 3、屬性傳值（一般適用於前一個界面傳值給後一個界面） 4、數據持久化傳值 NSUserDefaults是數據持久化的一種主要做存儲使用。 ...
Android組件化開發的簡單應用

組件化開發的主要步驟：一、新建Modules 1、新建Project,作為應用的主Module。 2、新建Module:"Common"，類型選擇"Android Library",作為所有其它Module的基礎依賴庫。 3、新建Module:"Home"，類型選擇"Android Library ...
ionic3 生命周期

ionic3 總共有8個鉤子函數，分別是：onPageLoaded，onPageWillEnter，onPageDidEnter，onPageWillLeave，onPageDidLeave，onPageWillUnload，onPageDidUnload 還有兩個鉤子不太一樣，上面的鉤子函數都沒有 ...
Build 2019 彩蛋

N久沒寫過博客了… 最近在玩 APEX 但是手殘黨表示打到15級了，至今殺敵 4 人… 當快遞員是越來越順手了… 今年巨硬的 Build 大會會在 5 月 6-8 號召開新發佈的 Hololens 應該會有更多的介紹出來打開 Build 網址：https://www.microsoft.com/ ...
console 調試技巧

前言如果統計一番前端最常用的方法，那麼 console.log 一定位列其中。無論你寫的是原生 JS 亦或者是 JQuery、Vue等等，調試之時，都離不開 console.log 方法。但是，console 對象中的方法不僅僅只有 log 方法。強大的 console 對象提供了大量控制台調試的 ...
（譯）刪除未使用的前端代碼

註：本文翻譯自 https://web.dev/fast/remove-unused-code，Written by Houssein Djirdeh。如有翻譯錯誤請指正。像 npm 這樣的包管理器通過允許任何人輕鬆地下載和使用超過50萬公共包來讓JavaScript世界變得更好。但我們經常引入一 ...
CSS學習筆記之float浮動屬性

一、前言浮動元素以脫離標準流的方式來實現元素的向左或向右浮動。float浮動屬性的四個參數：left：元素向左浮動；right：元素向右浮動；none：預設值，元素不浮動；inherit：繼承父元素的float屬性值。舉個慄子父元素是否註意到自己有個浮動的子div呢？從中我們可以發現，處於標 ...