html弹性盒子布局,div+css3弹性盒子(flex box)布局
一、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;}
123456flex-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;}
123456flex-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;}
123456flex-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;}
123456flex-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;}
123456align-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;}
123456order分別設置為 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}
123456flex-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;}
123456flex-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}
123456align-items:flex-start; align-self:flex-end;
總結
以上是生活随笔為你收集整理的html弹性盒子布局,div+css3弹性盒子(flex box)布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： stm32 pwm频率与周期计算
- 下一篇： 滴答顺风车怎么抢90%以上的订单_想来赚