一、CSS3 彈性盒子(Flex Box)

彈性盒子是CSS3的一種新布局模式。

CSS3 彈性盒( Flexible Box 或 flexbox)，是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。

引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

首先要明白幾個概念：

主軸：Flex容器的主軸主要用來配置Flex項目，默認是水平方向

側軸：與主軸垂直的軸稱作側軸，默認是垂直方向的

方向：默認主軸從左向右，側軸默認從上到下

主軸和側軸并不是固定不變的，通過flex-direction可以互換。

主軸(main axis)是沿著 flex 元素放置的方向延伸的軸(比如頁面上的橫向的行、縱向的列)。該軸的開始和結束被稱為main start 和main end。

交叉軸(cross axis)是垂直于 flex 元素放置方向的軸。該軸的開始和結束被稱為 cross start和 cross end。

設置了 display: flex 的父元素被稱之為 flex 容器(flex container)。

在 flex 容器中表現為柔性的盒子的元素被稱之為 flex 項(flex item)元素。

概念釋義

二、瀏覽器支持

表格中的數字表示支持該屬性的第一個瀏覽器的版本號。

緊跟在數字后面的 -webkit- 或 -moz- 為指定瀏覽器的前綴。

屬性

Basic support (single-line flexbox)

29.0 21.0 -webkit-

11.0

22.0 18.0 -moz-

6.1 -webkit-

12.1 -webkit-

Multi-line flexbox

29.0 21.0 -webkit-

11.0

28.0

6.1 -webkit-

17.0 15.0 -webkit- 12.1

三、CSS3 彈性盒子內容

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。

彈性容器通過設置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。

彈性容器內包含了一個或多個彈性子元素。

注意： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。

彈性子元素通常在彈性盒子內一行顯示。默認情況每個容器只有一行。

以下元素展示了彈性子元素在一行內顯示，從左到右:

flex彈性盒子

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

123456

彈性盒子布局自動一行填滿且不隨瀏覽器大小而變化

四、CSS3 彈性盒子常用屬性

屬性

描述

flex-direction

指定彈性容器中子元素排列方式

flex-wrap

設置彈性盒子的子元素超出父容器時是否換行

flex-flow

flex-direction 和 flex-wrap 的簡寫

align-items

設置彈性盒子元素在側軸(縱軸)方向上的對齊方式

align-content

修改 flex-wrap 屬性的行為，類似 align-items, 但不是設置子元素對齊，而是設置行對齊

justify-content

設置彈性盒子元素在主軸(橫軸)方向上的對齊方式

1. flex-direction 屬性

決定項目的方向。

注意：如果元素不是彈性盒對象的元素，則 flex-direction 屬性不起作用。

flex-direction: row | row-reverse | column | column-reverse;

四種方向row | row-reverse | column | column-reverse

屬性值

值

描述

row

默認值。元素將水平顯示，正如一個行一樣。

row-reverse

與 row 相同，但是以相反的順序。

column

元素將垂直顯示，正如一個列一樣。

column-reverse

與 column 相同，但是以相反的順序。

flex彈性盒子

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-direction:column;

/* flex-direction: row | row-reverse | column | column-reverse;

* row 默認值。元素將水平顯示，正如一個行一樣。

row-reverse 與 row 相同，但是以相反的順序。

column 元素將垂直顯示，正如一個列一樣。

column-reverse 與 column 相同，但是以相反的順序*/

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

123456

flex-direction:column;結果

2. flex-wrap 屬性

flex-wrap 屬性規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。

值

描述

nowrap

默認值。規定元素不拆行或不拆列。

wrap

規定元素在必要的時候拆行或拆列。

wrap-reverse

規定元素在必要的時候拆行或拆列，但是以相反的順序。

flex-wrap: nowrap | wrap | wrap-reverse;

可以取三個值：

(1) nowrap (默認)：不換行。

nowrap

(2)wrap：換行，第一行在上方。

wrap

(3)wrap-reverse：換行，第一行在下方。

wrap-reverse

彈性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

/*flex-direction:column;*/

/* flex-direction 屬性 決定項目的方向。

* flex-direction: row | row-reverse | column | column-reverse;

* row 默認值。元素將水平顯示，正如一個行一樣。

row-reverse 與 row 相同，但是以相反的順序。

column 元素將垂直顯示，正如一個列一樣。

column-reverse 與 column 相同，但是以相反的順序*/

flex-wrap:wrap;

/*flex-wrap 屬性 規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap 默認值。規定元素不拆行或不拆列。

wrap 規定元素在必要的時候拆行或拆列。

wrap-reverse 規定元素在必要的時候拆行或拆列，但是以相反的順序。

* */

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

123456

flex-wrap:wrap;

彈性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-direction:column;

/* flex-direction 屬性 決定項目的方向。

* flex-direction: row | row-reverse | column | column-reverse;

* row 默認值。元素將水平顯示，正如一個行一樣。

row-reverse 與 row 相同，但是以相反的順序。

column 元素將垂直顯示，正如一個列一樣。

column-reverse 與 column 相同，但是以相反的順序*/

flex-wrap:wrap;

/*flex-wrap 屬性 規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap 默認值。規定元素不拆行或不拆列。

wrap 規定元素在必要的時候拆行或拆列。

wrap-reverse 規定元素在必要的時候拆行或拆列，但是以相反的順序。

* */

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

123456

flex-direction:column;flex-wrap:wrap;

3. flex-flow 屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

/* flex-flow: */

flex-flow:column wrap;

彈性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-flow:row wrap;

/*

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

flex-flow:

例：flex-flow:row wrap;

* * */

}

.item{width: 300px; height: 100px}

.item1-1{ background:red;}

.item1-2{ background:orange;width: 300px; height: 120px}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

123456

flex-flow:row wrap;

4. justify-content屬性

justify-content 用于設置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式。

值

描述

flex-start

默認值。項目位于容器的開頭。

flex-end

項目位于容器的結尾。

center

項目位于容器的中心。

space-between

項目位于各行之間留有空白的容器內。(兩端對齊，項目之間的間隔都相等)

space-around

項目位于各行之前、之間、之后都留有空白的容器內。(每個項目兩側的間隔相等.所以,項目之間的間隔比項目與邊框的間隔大一倍.)

分布圖

彈性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

/*justify-content: flex-start(默認值) | flex-end | center | space-between | space-around;*/

/*justify-content:space-around;*/

/*

flex-start 默認值。項目位于容器的開頭。

flex-end 項目位于容器的結尾。

center 項目位于容器的中心。

space-between 項目位于各行之間留有空白的容器內。

space-around 項目位于各行之前、之間、之后都留有空白的容器內

*/

}

.item{width: 100px; height: 200px;}

.item1-1{ background:red;height: 100px}

.item1-2{ background:orange;width: 300px;}

.item1-3{ background:yellow;}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

123456

默認 justify-content: flex-start;

justify-content:flex-end

justify-content:flex-end;

justify-content:center

justify-content:center;

justify-content:space-between; /*兩端對齊，項目之間的間隔都相等。*/

justify-content:space-between;兩端對齊，項目之間的間隔都相等

justify-content:space-around;每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

justify-content:space-around;每個項目兩側的間隔相等.所以,項目之間的間隔比項目與邊框的間隔大一倍.

5. align-items屬性

align-items 屬性定義flex子項在flex容器的當前行的側軸(縱軸)方向上的對齊方式。

值

描述

stretch

默認值。項目被拉伸以適應容器。

center

項目位于容器的中心。

flex-start

項目位于容器的開頭。

flex-end

項目位于容器的結尾。

baseline

項目位于容器的基線上。

image

彈性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

align-items: stretch;

/*

flex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊。

center：交叉軸的中點對齊。

stretch(默認值)：如果項未設置高度或設為auto，將占滿整個容器的高度。

baseline: 項目的第一行文字的基線對齊。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px;}

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px;}

123456

默認align-items: stretch;如果項未設置高度或設為auto，將占滿整個容器的高度

align-items:flex-start;

align-items:flex-start;交叉軸的起點對齊

align-items:flex-end;

align-items:flex-end;交叉軸的終點對齊

align-items:center;

align-items:center;交叉軸的中點對齊

彈性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

align-items:baseline;

/*

flex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊。

center：交叉軸的中點對齊。

stretch(默認值)：如果項未設置高度或設為auto，將占滿整個容器的高度。

baseline: 項目的第一行文字的基線對齊。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px;

padding: 20px;} /* 修改文字開始的位置 通過padding來修改*/

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px;}

123456

align-items:baseline;項目的第一行文字的基線對齊

align-content 定義了多根軸線的對齊方式

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

值

描述

flex-start

與交叉軸的起點對齊。

flex-end

與交叉軸的終點對齊。

center

與交叉軸的中點對齊。

space-between

與交叉軸兩端對齊，軸線之間的間隔平均分布。

space-around

每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

stretch(默認值)

軸線占滿整個交叉軸。

align-content 多根軸線的對齊方式

彈性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

flex-flow:row wrap;

align-content: stretch;

/*

flex-start：與交叉軸的起點對齊。

flex-end：與交叉軸的終點對齊。

center：與交叉軸的中點對齊。

space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。

space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

stretch(默認值)：軸線占滿整個交叉軸。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px; }

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px;}

123456123456

默認align-content:stretch;

align-content:flex-start;

align-content: flex-start;

align-content: flex-end;

align-content: flex-end;

align-content:center;

align-content: center;

align-content:space-between;

align-content: space-between;與交叉軸兩端對齊，軸線之間的間隔平均分布。

align-content:space-around;

align-content:space-around;每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

五、flex-item項的常用屬性(彈性子元素屬性)

屬性

描述

order

設置彈性盒子的子元素排列順序。

flex-grow

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

flex-shrink

指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大于容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值。

flex-basis

用于設置或檢索彈性盒伸縮基準值。

flex

設置彈性盒子的子元素如何分配空間。

align-self

在彈性子元素上使用。覆蓋容器的 align-items 屬性。

1. order屬性

數值越小，排列越靠前，默認為0。

order: ;

：用整數值來定義排列順序，數值小的排在前面。可以為負值，默認為0。

數值越小，排列越靠前

彈性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px; order: 6;}

.item1-2{ background:orange;width: 300px;height: auto;order: 5;}

.item1-3{ background:yellow;width: 100px;order: 0;}

.item1-4{ background:green;width: 100px;order: 3;}

.item1-5{ background:cyan;width: 100px;order: 2;}

.item1-6{ background:blue;width: 100px;order: 1;}

123456

order分別設置為 6 5 4 0 3 2 1

2. flex-grow屬性

flex-grow: ;

：一個數字，規定項目將相對于其他靈活的項目進行擴展的量。默認值是 0。

按照設置數字比例進行拉伸，默認為0，即如果存在剩余空間，也不放大。

彈性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px; flex-grow:1}

.item1-2{ background:orange;height: auto;flex-grow:5}

.item1-3{ background:yellow;flex-grow:1}

.item1-4{ background:green;flex-grow:1}

.item1-5{ background:cyan;flex-grow:1}

.item1-6{ background:blue;flex-grow:1}

123456

flex-grow 屬性設定分別為 1 5 1 1 1 1

3. flex-shrink屬性

flex 元素僅在默認寬度之和大于容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值。默認為1，即如果空間不足，該項目將縮小。負值對該屬性無效

flex-shrink: ;

：一個數字，規定項目將相對于其他靈活的項目進行收縮的量。默認值是 1。

如果設置為0不進行收縮，值越大收縮越多。

flex-shrink 設置分別為 1 0 1 1 1 1 1 1

彈性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

}

.item{width: 400px; height: 200px;flex-shrink:1}

.item1-1{ background:red;height: 100px; }

.item1-2{ background:orange;height: auto;flex-shrink:2}

.item1-3{ background:yellow;flex-shrink:3}

.item1-4{ background:green;}

.item1-5{ background:cyan;}

.item1-6{ background:blue;}

123456

flex-shrink 設置分別為 1 2 3 1 1 1 值越大縮放比例越大

4. flex-basis屬性

flex-basis: | auto;

：一個長度單位或者一個百分比，規定元素的初始長度。

auto：默認值。長度等于元素的長度。如果該項目未指定長度，則長度將根據內容決定。

如果不使用 box-sizing 來改變盒模型的話，那么這個屬性就決定了 flex 元素的內容盒(content-box)的寬或者高(取決于主軸的方向)的尺寸大小。

默認值為auto，即項目的本來大小。也可以設為跟width或height屬性一樣的值(比如350px)，則項目將占據固定空間

5. flex屬性

flex 屬性用于設置或檢索彈性盒模型對象的子元素如何分配空間。

flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。

是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選

flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;

值

描述

flex-grow

一個數字，規定項目將相對于其他元素進行擴展的量。

flex-shrink

一個數字，規定項目將相對于其他元素進行收縮的量。

flex-basis

項目的長度。合法值："auto"、"inherit" 或一個后跟 "%"、"px"、"em" 或任何其他長度單位的數字。

auto

與 1 1 auto 相同。

none

與 0 0 auto 相同。

initial

設置該屬性為它的默認值，即為 0 1 auto。

inherit

從父元素繼承該屬性。

6. align-self屬性

.flex-container .flex-item {

align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;

}

值

描述

auto

默認值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。

stretch

元素被拉伸以適應容器。

center

元素位于容器的中心。

flex-start

元素位于容器的開頭。

flex-end

元素位于容器的結尾。

baseline

元素位于容器的基線上。

initial

設置該屬性為它的默認值。

inherit

從父元素繼承該屬性。

可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

改變子元素的align-items

彈性盒子方向

.container{

width: 1002px; height: 302px; border:1px solid;

display: flex;

align-items:flex-start;

/*

flex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊。

center：交叉軸的中點對齊。

stretch(默認值)：如果項未設置高度或設為auto，將占滿整個容器的高度。

baseline: 項目的第一行文字的基線對齊。

* */

}

/*.item{width: 100px; height: 200px;}*/

.item1-1{ background:red;height: 100px;width: 100px;

padding: 20px;}

.item1-2{ background:orange;width: 300px;height: auto;}

.item1-3{ background:yellow;width: 100px;}

.item1-4{ background:green;width: 100px;}

.item1-5{ background:cyan;width: 100px;}

.item1-6{ background:blue;width: 100px; align-self:flex-end}

123456

align-items:flex-start; align-self:flex-end;

總結

以上是生活随笔為你收集整理的html弹性盒子布局,div+css3弹性盒子(flex box)布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。