2. 程式人生 > >Flex佈局（一：基本概念和容器屬性）

Flex佈局（一：基本概念和容器屬性）

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

前言

算上來快2個月沒寫部落格呢，一是趕專案，二是中途接到一個朋友公司需要幫忙，週末都在TA們公司兼職，然後空下來就快12月初，然後又陸陸續續發生一些大事小事，當然最令人記憶猶新就是借錢。

這個月初由於財務出了點問題，找了幾個朋友借錢，當然也包括自己借過錢的人，那時候才知道什麼叫人情冷暖。

（1）Flex

傳統的佈局方案，基於css盒子模型，float+display+position，TA對於很多特殊佈局方案就非常不方便，必須垂直居中,

舉例方案1(寬高度已知，ie9+）)

<style>
    .outer{
        border: 1px solid red
 
;
        width: 500px;
        height: 500px;
        position: absolute;
        margin: auto; /*必須*/
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
</style>
<body>
<div class="outer"></div>
</body>

舉例方案2(自適應高度)
外部容器需要定義寬度,內容由內部容器高度決定，自適應高

<style
 
>
    .outer{
        border: 1px solid red;
        width: 500px;
        position: absolute;
        left: 50%;/*先平移50%*/
        top: 50%;
        /*平移回來元素寬高的一半*/
        transform: translate(-50%,-50%); 
    }
    .inner{
        height: 200px;
    }
</style>
<body>
<div class="outer">
    <div
 
 class="inner"></div>
</div>
</body>

Flex 是 Flexible Box 的縮寫，意為”彈性佈局”，用來為盒狀模型提供最大的靈活性。

任何元素都可以設定為flex

/* 塊級元素*/
div{
  display: -webkit-flex; /* Safari相容方案 */
  display: flex;
}
/* 行內元素*/
span{
 display: inline-flex;
}

（2）相容性

參考此連結: 相容性連結

2009年，W3C 提出了一種新的方案—-Flex 佈局（彈性盒子模型），可以簡便、完整、響應式地實現各種頁面佈局。

到目前為止，在PC端其實很樂觀了，基本上主流的瀏覽器都已經相容了flex的使用，但是到了移動端就不是那麼好了，特別是國內瀏覽器，考慮到uc瀏覽器佔了大頭，但是uc從圖中看到只相容flex最老的一個版本，也就是2009年的版本，即display:box;很多現在flex的優秀特性到了它上面都不相容了，所以建議大家在使用的時候，假如2009版本可以滿足開發要求的話，還是去使用2009版本，這樣風險更小。

但是假如想相容多個瀏覽器，可以採用優雅降級的方式來使用，這裡推薦一個scss的sass-flex-mixin,這樣就可以使用最新的寫法，並且相容大部分瀏覽器了。

(3)基本概念

flex佈局元素稱為Flex容器(flex container),簡稱容器。他的所有子元素自動稱為容器成員,稱為Flex專案(flex item),簡稱專案。

flex佈局

容器分為兩根軸：水平主軸(main axis)和垂直的交叉軸(cross axis)。軸開始和結束分別以軸名+start或end標識。

專案預設沿著主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉空間叫做cross size。

(4) 容器屬性

常用屬性：
flex-direction（主軸方向。預設row）
flex-wrap（專案在容器軸線排不下是否換行。 預設nowrap）
flex-flow（是前兩個屬性的縮寫。 預設值未row nowrap）

justify-content（專案在容器主軸上對齊方式。預設flex-start）
align-items（專案在交叉軸上如何對齊。預設flex-start）
align-content（多根軸線的對齊方式。預設flex-start）

4.1 flex-direction屬性

flex-direction屬性決定主軸的方向（即專案的排列方向）。

TA的常用值為

row(預設值): 主軸水平方向,起點為左端。
row-reverse: 主軸水平方向,起點為右端。
column: 主軸垂直方向,起點為上方。
column-reverse: 主軸垂直方向,起點為下方。

例子1（row）

<style>
    div{
        display: flex;
        border: 1px solid #000;
        flex-direction: row;
    }
    p{
        border: 1px solid red;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        margin-left: 20px;
    }
</style>
<body>
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
</body>

row

例子2（row-reverse）

<style>
    div{
        display: flex;
        border: 1px solid #000;
        flex-direction: row-reverse;
    }
    p{
        border: 1px solid red;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        margin-right: 20px;
    }
</style>
<body>
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
</body>

row-reverse

例子3（column）

<style>
    div{
        display: flex;
        border: 1px solid #000;
        flex-direction: column;
    }
    p{
        border: 1px solid red;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        margin-top: 20px;
        margin-left: 20px;
    }
</style>
<body>
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
</body>

column

PS：剩下column-reverse為反轉column。這裡就不再舉例。

4.2 flex-wrap屬性

預設情況下，專案都排在一條線（又稱”軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

TA的常用值為

nowrap(預設值): 不換行。
wrap: 換行,第一行在上方。
wrap-reverse: 換行,第一行在下方。

例子1（nowrap）

依然用上面的程式碼, 多增加幾個專案p

<style>
    div{
        display: flex;
        border: 1px solid #000;
        flex-direction: row;
        flex-wrap: nowrap;
    }
    p{
        border: 1px solid red;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        margin-left: 20px;
    }
</style>
<body>
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
</div>
</body>

nowrap

PS
上面佈局我們可以看到, 容器為水平主軸, 專案本來是100px的寬度, 但是因為不換行（可以通過調整瀏覽器寬度）, 導致專案本身發生等比縮小（如果傳統浮動會發生類似換行效果）。

例子2（wrap）

<style>
    div{
        display: flex;
        border: 1px solid #000;
        flex-direction: row;
        flex-wrap: wrap;
    }
    p{
        border: 1px solid red;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        margin-left: 20px;
    }
</style>
<body>
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
</div>
</body>

wrap

PS
上面佈局我們可以看到, 因為換行, 當水平方向放不下下一個專案就會發生換行, 類似浮動（第一行在上方）。

例子3（wrap-reverse）
我們將上方程式碼flex-wrap修改

<style>
    div{
        display: flex;
        border: 1px solid #000;
        flex-direction: row;
        flex-wrap: wrap-reverse;
    }
    p{
        border: 1px solid red;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        margin-left: 20px;
    }
</style>
<body>
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
</div>
</body>

wrap-reverse

總結
與wrap不同之處在於, 第一行排列在下方。

4.3 flex-flow屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap

div {
  flex-flow: <flex-direction> || <flex-wrap>;
}

4.4 justify-content屬性

justify-content屬性定義了專案在主軸上的對齊方式。

TA的常用值為

flex-start(預設值): 左對齊。
flex-end: 右對齊。
center: 居中。
space-between: 兩端對齊, 專案之間間隔相等。
space-around: 每個專案兩側的間隔相等。所以,專案之間的間隔比專案與邊框的間隔大一倍。

例子

<style>
    div{
        display: flex;
        border: 1px solid #000;
        justify-content: flex-start; /*此處修改成不同值*/
    }
    p{
        border: 1px solid red;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        margin-left: 20px;
    }
</style>
<body>
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
</body>

flex-start
flex-start

flex-end

flex-end

PS
這裡是容器內專案與主軸對齊方式。要區別下當flex-direction: row-reverse（這裡會反轉專案順序）;而此處順序是正常的。

flex-center
center

PS 對於傳統佈局，這種居中方式和flex的居中，是不是覺得好比飛機與步槍的區別。

space-between

space-between

PS
此處多用於處理兩端對齊, 配合align-item讓專案居中。

space-around
space-around

4.5 align-items屬性

align-items屬性定義專案在交叉軸上如何對齊。

TA的常用值為

flex-start(預設值): 與交叉軸的起點對齊。
flex-end: 與交叉軸的終點對齊。
center: 與交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。

例子

<style>
    div{
        display: flex;
        border: 1px solid #000;
        height: 250px;
        align-items: flex-start;
    }
    p{
        border: 1px solid red;
        width: 80px;
        text-align: center;
        margin-left: 20px;
    }
    p:nth-child(1){
        height: 80px;
    }
    p:nth-child(2){
        height: 160px;
    }
    p:nth-child(3){
        height: 50px;
    }
    p:nth-child(4){
        height: 100px;
    }
</style>
<body>
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>
</body>

flex-start

align-items-start

flex-start

align-items-end

center

align-items-center

baseline

為了測試分別為上面程式碼增加

p:nth-child(1){
        height: 80px;
        line-height: 80px; /*增加行高*/
    }
    p:nth-child(2){
        height: 160px;
    }
    p:nth-child(3){
        height: 50px;
        line-height: 50px; /*增加行高*/
    }
    p:nth-child(4){
        height: 100px;
    }

baseline

PS
上面圖可以看出, 專案基於第一行文字的基線對齊對齊。

stretch

去除專案的height。程式碼如下

<style>
    div{
        display: flex;
        border: 1px solid #000;
        height: 250px;
        align-items: stretch;
    }
    p{
        border: 1px solid red;
        width: 80px;
        text-align: center;
        margin-left: 20px;
    }
</style>
<body>
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>
</body>

align-items-stretch

PS

從上圖可以看出，當專案高度未設定或auto時，stretch會充滿容器。

4.5 align-content 屬性

align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

TA的常用值為

flex-start(預設值): 與交叉軸的起點對齊。
flex-end: 與交叉軸的終點對齊。
center: 與交叉軸的中點對齊。
space-between: 與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around: 每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線佔滿整個交叉軸。

例子

<style>
    div{
        display: flex;
        border: 1px solid #000;
        height: 250px;
        align-items: flex-start;
        flex-wrap: wrap;
        align-content: flex-start;
    }
    p{
        border: 1px solid red;
        width: 80px;
        text-align: center;
        margin-left: 20px;
    }
</style>
<body>
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
</div>
</body>

flex-start

align-content-start

flex-end

align-content-end

center

align-content-center

stretch
align-content-stretch

space-between
space-between

PS
從上圖可以看出，與交叉軸兩端對齊，但是軸線之間的間隔是平均分佈。

space-around

space-around

PS

從上圖可以看出，因為每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

相關推薦

Flex佈局（一：基本概念和容器屬性）

前言 算上來快2個月沒寫部落格呢，一是趕專案，二是中途接到一個朋友公司需要幫忙，週末都在TA們公司兼職，然後空下來就快12月初，然後又陸陸續續發生一些大事小事，當然最令人記憶猶新就是借錢。 這個月初由於財務出了點問題，找了幾個朋友借錢，當然也包括自己借過錢的

應用負載均衡之LVS(一)：基本概念和三種模式

保存 訪問 方式 video big key vhdl cisc vid 網站架構中，負載均衡技術是實現網站架構伸縮性的主要手段之一。所謂"伸縮性"，是指可以不斷向集群中添加新的服務器來提升性能、緩解不斷增加的並發用戶訪問壓力。通俗地講，就是一頭牛拉不動時，就用兩頭、三

高可用之KeepAlived(一)：基本概念和配置文件分析

leg bold touch event radius chm present ket temp KeepAlived系列文章：http://www.cnblogs.com/f-ck-need-u/p/7576137.html 本文目錄：1. 概述2. VRRP協

使用Advanced Installer製作IIS安裝包（一：配置IIS和Web.config）

前言：大過年的，寫篇文章不容易，還是給自己點個贊~~年前找了下.net安裝包的製作方法，發現Visual Studio自帶的製作工具使用起來非常麻煩，需要單獨下載安裝包，並且什麼啟用認證等等屁事相當麻煩，最坑爹的是它的自定義dialog使用起來有很多的侷限性，所以找了很久，終於找到了Advanced Inst

Oracle知識梳理（一）理論篇：基本概念和術語整理

http 知識梳理 屬性集 操作 url 本質 開發 表格 weight 理論篇：基本概念和術語整理 一、關系數據庫 關系數據庫是目前應用最為廣泛的數據庫系統，它采用關系數據模型作為數據的組織方式，關系數據模型由關系的數據結構，關系的操作集合和關系的完整

使用SLF4J和LOGBACK （一 ： 基本使用）

asi 個人 fig 接口實現 pac 再次 intro 級別 多說 1.SLF4J是什麽？ slf4j是一個日誌門面，它不是具體的日誌實現框架，而是提供了通用的日誌接口，按個人理解來說，是通過接口實現多態，來滿足應用在不同日誌框架間切換的需求。 例如在程序中我們需要記錄

java反射機制一（反射的基本概念和理解）

反射就是對一個類進行解剖，把一個類中的各種成分對映成一個類 java程式執行位元組碼檔案的過程 1啟動jvm程序 2把所有相關的位元組碼加入記憶體（類載入器） 3.系統為每個位元組碼生成一個class物件 4初始化（靜態程式碼塊） 5靜態成員變數 得到一個類的C

RabbitMQ訊息佇列（一基本概念和常用命令）

常用命令 /etc/init.d/rabbitmq-server start|stop|restart|reload rabbitmqctl  add_vhost  vhostname  ##建立vhost rabbitmqctl   delete_vhost  v

【資料探勘概念與技術】學習筆記6-挖掘頻繁模式、關聯和相關性：基本概念和方法（編緝中）

頻繁模式是頻繁地出現在資料集中的模式（如項集、子序列或子結構）。頻繁模式挖掘給定資料集中反覆出現的聯絡。“購物籃”例子，想象全域是商店中商品的集合，每種商品有一個布林變數，表示該商品是否出現。則每個購物籃可以用一個布林向量表示。分析布林向量，得到反映商品頻繁關聯或同時購買的購買模式。這些模式可用關聯規則來表示

ArcGIS中的坐標系：基本概念和常用操作（二）

htm 計算幾何 bsp str com top span 面積 我們 關於坐標系，上次的內容還沒有結束。 上次已經解釋清楚關於投影坐標系和地理坐標系的區別了，它們在實際應用上也有諸多不同。 下面這張圖應該比較清晰 我們經常能發現，當計算面積時，提示面積已禁用，原

python學習筆記(一)：基本概念

單引號 網絡爬蟲 解釋型 g模式 deb 恢復 判斷語句 安裝 bubuko ---恢復內容開始--- 一.python簡介 pyhthon是解釋型語言，python可以用來網絡爬蟲、數據分析、web開發、人工智能、嵌入式、自動化測試、自動化運維等，所有語言中，地方放庫最多

spring基礎（1：基本概念）

poj 操作 共享問題 元素 組成 The 開發 let 可選值 本系列筆記來自對《Spring實戰》第三版的整理，Spring版本為3.0 ??spring是為了解決企業級應用開發的復雜性而創建的，spring最根本的使命是：簡化Java開發。為降低開發復雜性有以下四種關

IndexedDB（一：基本使用）

dbr version 並且 目的 https 正是 本地 沒有 () 在HTML5本地存儲——Web SQL Database提到過Web SQL Database實際上已經被廢棄，而HTML5的支持的本地存儲實際上變成了 Web Storage（Local Storag

Python並行程式設計(一)：基本概念

  1、執行緒和程序       程序是應用程式的一個執行例項，比如，在桌面上雙擊瀏覽器將會執行一個瀏覽器。執行緒是一個控制流程，可以在程序內與其他活躍的執行緒同時執行。控制流程指的是順序執行一些機器指令。程序可以包含多個執行緒，所以開啟一個瀏覽器，作業系統將建立一個程序，並開始執行這個程序的主執行緒。每一

Kafka學習筆記一：基本概念

1、Kafka是什麼 Kafka是最初由Linkedin公司開發，是一個分散式、分割槽的、多副本的、多訂閱者，基於zookeeper協調的分散式日誌系統(也可以當做MQ系統)，常見可以用於web/nginx日誌、訪問日誌，訊息服務等等，Linkedin於2010年貢獻給了Apache基金會併成為

MongoDB入門一：基本概念

一.資料庫的分類 目前的資料庫主要分為關係型資料庫和非關係型資料。 關係型資料庫： 通過SQL結構化查詢和儲存語句，最常見的就是Oracle和MySQL 保持資料一致性理論，遵循ACID原理 非關係型資料庫： - Not Only SQL,是對不同於

挖掘頻繁模式、關聯和相關性：基本概念和方法

基本概念 頻繁模式： 頻繁模式是頻繁地出現在資料集中的模式（如項集、子序列或子結構）。 例如：頻繁地同時出現在交易資料集中的商品（如香皂和洗衣液）的集合是頻繁項集。 序號 交易號 香皂（a） 洗髮露（b） 洗衣液（c） 牙膏

【資料探勘筆記六】挖掘頻繁模式、關聯和相關性：基本概念和方法

6.挖掘頻繁模式、關聯和相關性：基本概念和方法 頻繁模式（frequent pattern）是頻繁地出現在資料集中的模式。 6.1 基本概念 頻繁模式挖掘搜尋給定資料集中反覆出現的聯絡，旨在發現大型事務或關係資料集中項之間有趣的關聯或相關性，其典型例子就是購物籃分析。 購物

iOS/OS X記憶體管理(一)：基本概念與原理

在Objective-C的記憶體管理中，其實就是引用計數(reference count)的管理。記憶體管理就是在程式需要時程式設計師分配一段記憶體空間，而當使用完之後將它釋放。如果程式設計師對記憶體資源使用不當，有時不僅會造成記憶體資源浪費，甚至會導致程式crach。我們將會從引用計數和記憶體管理

Elasticsearch入門篇（一、基本概念）

注意：所有es入門篇部落格都是根據es官網6.2版本的文件翻譯而來有一些概念是Elasticsearch的核心。從一開始就理解這些概念將極大地幫助簡化學習過程。近實時（NRT）Elasticsearch是一個接近實時的搜尋平臺。這意味著從索引文件的時間到可搜尋的時間之間存在輕