CSS3中的彈性盒子模型

来源:https://www.cnblogs.com/wu0379/archive/2019/08/24/11403870.html
-Advertisement-
Play Games

介紹 在css2當中，存在標準模式下的盒子模型和IE下的怪異盒子模型。這兩種方案表示的是一種盒子模型的渲染模式。而在css3當中，新增加了彈性盒子模型，彈性盒子模型是一種新增加的強大的、靈活的佈局方案。彈性盒子模型是css3中新提出的一種佈局方案。是一種為了應對針對不同屏幕寬度不同設備的一整套新的布 ...


介紹

在css2當中，存在標準模式下的盒子模型和IE下的怪異盒子模型。這兩種方案表示的是一種盒子模型的渲染模式。而在css3當中，新增加了彈性盒子模型，彈性盒子模型是一種新增加的強大的、靈活的佈局方案。彈性盒子模型是css3中新提出的一種佈局方案。是一種為了應對針對不同屏幕寬度不同設備的一整套新的佈局方案。主要是對一個容器中的子元素進行排列、對齊和分配空白空間的方案的調整。

新舊版本的彈性盒子模型
在之前，css3曾經推出過舊版本的彈性盒子模型。相對於新版本的彈性盒子模型而言，舊版本的內容與新版本還是有些出入。而且，從功能上來講，舊版本的彈性盒子模型遠遠沒有新版本的盒子模型強大，從相容性來講，二者在pc端ie9以下都存在著相容性問題，但是在移動端，舊版本的彈性盒子模型相容性則更好一點。但是對於我們來說，我們依然要將主要的精力放在新版本的彈性盒子模型的身上，因為舊版本的彈性盒子模型淘汰是必然，隨著手機端的相容性逐漸提升，舊版本必將被淘汰。另外，新版本具有更加強大的功能，也值得我們進行深度的學習。那麼我們對於新舊兩個版本的彈性盒子模型，我們只需要抱著對比的心態學習即可，掌握新版本，瞭解舊版本，這樣即使有一天我們需要使用舊版本，也可以非常容易的學習舊版本的彈性盒子模型。

相關概念

  •     主軸

        我們以元素排在一行為例，當元素排列在一行的時候，主軸既表示元素排列的方向，橫向排列則主軸即可以理解為一條橫線，又因為我們元素預設是從左向右排列，那麼我們可以說在預設的情況下，元素的主軸的起始位置是在左，而方向為右，終點也為右。

  •     側軸

        元素垂直的方向即為側軸。預設上為起點，下為終點。

  •     彈性容器

        我們想要使用彈性盒子模型，就需要將容器轉換為彈性容器，我們說一個包含於子元素的容器設置了display:flex，那麼這個容器也就變成了彈性容器。

  •     彈性子元素

        當子元素的父元素變成了彈性容器，那麼其中的所有的子元素也自然而然的變成了彈性子元素。

如何創建一個彈性容器：
    display:flex | inline-flex

 

彈性容器屬性

  •     flex-direction

        彈性容器中子元素的排列方式(主軸排列方式)
        屬性值：
            row:預設在一行排列
            row-reverse:反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。）
            column：縱向排列。
            column-reverse：反轉縱向排列，從下往上排，最後一項排在最上面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-direction</title>
    <style>
        html,body {
            margin:0;
            padding:0;
        }
        nav {
            height: 500px;
            background-color: lightcyan;
            display: flex;
            flex-direction: row-reverse;/*居左1234 變成居右4321*/
            flex-direction: column;/*居左1234變成上下1234*/
            flex-direction: column-reverse;/*變成下上1234*/
        }
        nav div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            margin-right: 10px;
        }
    </style>
</head>
<body>

<nav>
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
    <div class="d4">4</div>
</nav>

</body>
</html>
  •     flex-wrap

        設置彈性盒子的子元素超出父容器時是否換行
        屬性值：
            nowrap: 預設值。規定元素不拆行或不拆列。
            wrap:規定元素在必要的時候拆行或拆列。
            wrap-reverse:規定元素在必要的時候拆行或拆列，但是以相反的順序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-wrap</title>
    <style>
        .box {
            height: 600px;
            background-color: lightgoldenrodyellow;
            display: flex;
            /*設置了屬性為wrap，那麼一行放不下的時候會自動的去下一行*/
            /*flex-wrap:wrap;*/
            /*設置了屬性為wrap-reverse會讓排序發生一個反轉，雖然同樣是多行，但是會變成從下到上*/
            flex-wrap: wrap-reverse;
        }
        .box div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            margin: 10px;
        }
    </style>
</head>
<body>

<div class="box">
    <!--此時元素如果不換行，那麼當一行的整體放不下時，每個元素就會相應的縮小-->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

</body>
</html>
 
  •     flex-flow

        flex-direction 和 flex-wrap 的簡寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-wrap</title>
    <style>
        .box {
            height: 600px;
            background-color: lightgoldenrodyellow;
            display: flex;
            flex-flow: row wrap;
        }
        .box div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            line-height: 100px;
            text-align: center;
            font-weight: bold;
            margin: 10px;
        }
    </style>
</head>
<body>

<div class="box">
    <!--此時元素如果不換行，那麼當一行的整體放不下時，每個元素就會相應的縮小-->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

</body>
</html>
  •     align-item

        設置彈性盒子元素在側軸（縱軸）方向上的對齊方式
        相關屬性值：
            flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
            flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
            center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
            baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>align-item</title>
    <style>
        .box {
            height: 600px;
            background-color: lemonchiffon;
            display: flex;
            /*預設 側軸起點橫向排列*/
            /*align-items: flex-start;*/
            /*側軸終點橫向排列*/
            /*align-items: flex-end;*/
            /*側軸終點橫向排列*/
            /*align-items: center;*/
            align-items: baseline;
        }
        .box div{
            width: 100px;
            height: 100px;
            background-color: lightsalmon;
            text-align: center;
            line-height: 100px;
            font-weight: bold;
            margin:10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>
  •  align-content

        修改 flex-wrap 屬性的行為，類似 align-items, 但不是設置子元素對齊，而是設置行對齊(行與行的對其方式).
        相關屬性：
            flex-start： 沒有行間距
            flex-end： 底對齊沒有行間距
            center ：居中沒有行間距
            space-between：兩端對齊，中間自動分配
            space-around：自動分配距離
        請註意本屬性在只有一行的伸縮容器上沒有效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>align-content</title>
    <style>
        nav {
            height: 600px;
            background-color: lemonchiffon;
            display: flex;
            /*開啟多行*/
            flex-wrap: wrap;
            /*側軸起點上下兩行對齊，沒有行間距*/
            /*align-content: flex-start;*/
            /*側軸終點上下兩行對齊，沒有行間距，第一行依然在上*/
            /*align-content: flex-end;*/
            /*側軸終點對齊，第一行依然在上，沒有行間距*/
            /*align-content:center;*/
            /*兩端對齊，中間自動分配*/
            /*align-content: space-between;*/
            /*自動分配距離*/
            align-content:space-around;
        }
        nav div {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            margin:10px;
        }
    </style>
</head>
<body>
    <nav>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
    </nav>
</body>
</html>

 

  •     justify-content

        設置彈性盒子元素在主軸（橫軸）方向上的對齊方式
        相關屬性：
            flex-star：t預設，頂端對齊
            flex-end：末端對齊
            center：居中對齊
            space-between：兩端對齊，中間自動分配
            space-around：自動分配距離

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>justify-content</title>
    <style>
        nav {
            height: 600px;
            background-color: lightgoldenrodyellow;
            display: flex;
            /*justify-content: flex-start;*/
            /*主軸對齊，貼右 1234*/
            /*justify-content: flex-end;*/
            /*主軸對齊，居中*/
            /*justify-content: center;*/
            /*兩端對齊，中間自動分配*/
            /*justify-content: space-between;*/
            /*自動分配距離*/
            justify-content: space-around;
        }
        nav div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin:10px;
        }
    </style>
</head>
<body>
<nav>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</nav>
</body>
</html>

彈性子元素屬性

  •     order

        設置彈性盒子的子元素排列順序。 number排序優先順序，數字越大越往後排，預設為0，支持負數。

  •     flex-grow

        設置或檢索彈性盒子元素的擴展比率。
        屬性值:int

  •     flex-shrink

        設置或檢索彈性盒子元素的收縮比率。
        屬性值:int

  •     flex-basis

        用於設置或檢索彈性盒伸縮基準值
        屬性值:int

  •     flex

        設置彈性盒子的子元素如何分配空間
        是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性

  •     align-self

        在彈性子元素上使用。覆蓋容器的 align-items 屬性。
        值與容器屬性一樣，只是這個是單獨的設置某個元素。

 

 


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

-Advertisement-
Play Games
更多相關文章
  • link和@import的區別
    樣式的導入方式 link @import link @import 一、link 的使用 二、@import 的使用 三、link 和 @import 的區別 1、引入的內容不同 link 除了引用樣式文件，還可以引用圖片等資源文件，而 @import 只引用樣式文件 2、載入順序不同 link 引 ...
  • 黑客帝國背景
    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name= ...
  • 關於DOM事件流、DOM0級事件與DOM2級事件
    一、DOM 事件模型 DOM 事件模型包括捕獲和冒泡，捕獲是從上往下到達目標元素，冒泡是從當前元素，也就是目標元素往上到 window 二、流 流的概念，在現今的 JavaScript 中隨處可見。比如說 React 中的單向數據流，Node 中的流，還有 DOM 事件流，都是流的一種生動體現。至於 ...
  • jsp+servlet+mysql簡單實現用戶登陸註冊
    原碼，項目中遇到的錯誤，解決方法，文章最後有鏈接可以獲取 項目簡介 功能描述 登陸，註冊，用戶一覽表，修改，刪除，添加，模糊查詢和精確查詢 採用的技術及環境 JSP：前端的信息展示 Servlet：業務邏輯功能實現，及調用資料庫的實現數據處理和傳輸 MySQL：用來實現數據存儲 利用Eclipse來 ...
  • 使用base64編碼把背景添加到CSS文件中
    最近博客背景圖片的外鏈掛了，沒辦法，只好另找辦法。 在博客園後臺，有一個“文件”菜單，可以上傳自己的文件，我就打算把圖片傳到裡面。但卻發現了一個很反人性的設置：不允許上傳jpg，png文件，允許上傳的只有bmp，gif這樣的圖片文件。bmp文件太大，載入都要好幾秒，gif文件質量太差，只有256色， ...
  • 複習0824js
    編程思想： 面向過程：凡事親力親為，所有事情的過程都要清楚，註重的是過程。 面向對象：提出需求，找到對象，對象解決這個問題，我們要結果，註重的是結果。 面向對象的特性：封裝，繼承，多態； JS： 是一門解釋性語言，是一門腳本語言，是一門弱類型語言，是一門基於對象的語言，是一門動態類型的語言。 對象： ...
  • React Native實踐總結一
    一、React的世界觀1、通過改變state來改變視圖視圖不用考慮如何改變自己，把state畫出來即可。2、變數不可變通過創建一個新的state來更改state，使得變更可追蹤，不容易因為其他部分修改state導致不可預測的錯誤3、結構與樣式分離參考了CSS的做法，RN的style機制使得代碼更清晰 ...
  • 數組和字元串的方法整合
    js中的數組和字元串有點類似，不是說本質上，而是在遍歷，獲取時的類似。從標識來說，可以一眼看出那個是數組，那個是字元串；但在使用遍歷時，會不經意的將兩者混淆，導致方法用錯。同時兩者的方法又有好幾個相同的，但需註意語義，以及有些方法是不會對原數組產生影響的。以下是我整理的一些關於數組和字元串的一些方法 ...
一周排行
    -Advertisement-
    Play Games
  • GoF之工廠模式
    GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式（靜態工廠模式）1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點：2. 總結:3 ...
  • dotnet C# 簡單的追加文件夾到 ZipArchive 壓縮文件的方法
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • Elasticsearch 系列（六）- ES數據同步和ES集群
    本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說，下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫，因此mysql數據發生改變時，Elasticsearch也必須跟著改變，這個就是Elasticsearch與my ...
  • 自動化測試數據生成：Asp.Net Core單元測試利器AutoFixture詳解
    引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據，今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫，旨在最大程度地減少單元測試中的“安排（Arrange）”階段，以提高 ...
  • .NET Emit 入門教程：第七部分：實戰項目1：將 DbDataReader 轉實體
    經過前面幾個部分學習，相信學過的同學已經能夠掌握 .NET Emit 這種中間語言，並能使得它來編寫一些應用，以提高程式的性能。隨著 IL 指令篇的結束，本系列也已經接近尾聲，在這接近結束的最後，會提供幾個可供直接使用的示例，以供大伙分析或使用在項目中。 ...
  • Windows下綁定線程到指定的CPU核心
    當從不同來源導入Excel數據時，可能存在重覆的記錄。為了確保數據的準確性，通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間，而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟： 1. 首先安裝免費.NET ...
  • mORMot 1.18 第07章 簡單的讀寫操作
    C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式，使程式更加健壯和可靠。 異常處理的基本概念： 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • mORMot 1.18 第06章 概念
    優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解，包括JDK和第三方庫。 我花了很多時間來學習API，尤其是在閱讀了Effective Java 3rd Edition之後 ，Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發，而不是為常見的東西編 ...
  • php 開發規範
    框架 · 使用laravel框架，原因：tp的框架路由和orm沒有laravel好用 · 使用強制路由，方便介面多時，分多版本，分文件夾等操作 介面 · 介面開發註意欄位類型，欄位是int，查詢成功失敗都要返回int（對接java等強類型語言方便） · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 2024 年 4 月 28 日 周日 晴 熱（1253 字）
    正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵，火星子都快出來了。司機跟那同事更熟一些，連我在內一共就三個人，同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了，馬上聽出來了，為那個無辜的企業經辦人辯護，實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責， ...
所有分類