彈性盒子是 css3 的一種新的布局模式,是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白空間.
使用display:flex即可將該容器指定為"flex"布局。需要注意的是，容器設定為:"flex"布局後，子元素的"float"，"clear","vertical-align"屬性將失效。
屬性說明
容器設定了display:flex屬性的元素，被稱為容器。
專案容器內的子元素被稱為專案(item)
主軸水平軸線(main axis)
交叉軸垂直的軸線(cross axis)
main start
主軸的開始位置叫main start
main end
主軸的結束位置叫main end
cross start
交叉軸的開始位置叫做cross start
cross end
交叉軸的結束位置叫cross end
main size
單個專案佔據的主軸空間叫做main size
cross size
單個專案佔據的交叉軸空間叫做cross size
image.png
屬性說明flex-direction
主軸的方向,確定彈性子元素排列方式
flex-wrap
當彈性子元素超出彈性容器範圍如何換行
flex-flow
flex-direction + flex-wrap的簡寫
justify-content
主軸上的對齊方式
align-items
交叉軸上的對齊方式
align-content
交叉軸有空白時，交叉軸的對齊方式
主軸的方向,確定彈性子元素排列方式
屬性值說明
row (預設值)
水平從左到右排列
row-reverse
水平從右到左排列
column
垂直從上到下排列
column-reverse
垂直從下到上排列
image.png
當彈性子元素超出彈性容器範圍如何換行
屬性值說明
nowrap (預設值)
不換行wrap
換行，第一行在上面
wrap-reverse
換行，第一行在下方
源**：
12
3456
nowrap執行結果
wrap執行結果：
wrap執行結果
wrap-reverse執行結果：
wrap-reverse執行結果
該屬性是flex-direction和flex-wrap的縮寫。
屬性值說明
flex-start(預設值)
左對齊flex-end
右對齊center
居中space-between
兩端對齊，元素之間的間隔都相等
space-around
每個元素的兩側都相等
** flex-start執行結果**
flex-start執行結果
** flex-end執行結果**
flex-end執行結果
** center執行結果**
center執行結果
** space-between執行結果**
space-between執行結果
** space-around執行結果**
space-around執行結果
css 彈性布局
什麼是彈性布局？flex布局，是h5新出的布局方式，主要代替傳統float浮動布局。注意 布局要給父元素設定，子元素按照布局方式排列，他會使塊級元素不獨佔一行。特點 當沒有給彈性布局設定換行時，子元素不會自動換行會在一行顯示。display flex 設定彈性布局 flex direction 設定...
CSS 彈性布局
box box box 基本概念 row 預設值 主軸為水平方向，起點在左端。row reverse 主軸為水平方向，起點在右端。column 主軸為垂直方向，起點在上沿。column reverse 主軸為垂直方向，起點在下沿。nowrap 預設 不換行 wrap 換行，第一行在上方 wrap r...
Css 彈性布局
彈性布局 display flex 要發生彈性布局的子元素，他們的父元素，成為容器需設定display flex flex將塊級元素設定為容器 inline flex將行內元素設定為容器 元素設定為flex容器後，容器的text align，vertical align失效設定主軸的方向 flex ...