(1) display:flex;給父容器新增這個屬性;
(2) display:flex; 容器新增彈性布局後,顯示為塊級元素;
display:inline-flex; 容器新增彈性布局後,顯示為行級元素;
(3) 設為 flex布局後,子元素的float、clear屬性將失效。但是position屬性,依然生效。
2、作用于父容器的5個屬性
(1)flex-direction屬性決定主軸的方向(即專案的排列方向)。
row(預設值): 主軸為水平方向,起點在左端;
row-reverse: 主軸在水平方向,起點在右端 ;
column:主軸為垂直方向,起點在上沿;
column-reverse:主軸為垂直方向,起點在下沿。
(2)flex-wrap屬性定義,如果一條軸線排不下,如何換行。
nowrap(預設):不換行。當容器寬度不夠時,每個專案會被擠壓寬度;
wrap: 換行,並且第一行在容器最上方;
wrap-reverse: 換行,並且第一行在容器最下方。
如下所示,使用彈性布局,橫向排列,起點在左邊,換行。
>彈性布局
title
>
9<
style
>
10.box
1718
.box div
24style
>
25head
>
2627
<
body
>
28<
div
class
="box"
>
29<
div>第乙個盒子
div>
30<
div>第二個盒子
div>
31<
div>第三個盒子
div>
32<
div>第四個盒子
div>
33<
div>第五個盒子
div>
34<
div>第六個盒子
div>
35<
div>第七個盒子
(3)justify-content屬性定義了專案在主軸上的對齊方式。這個屬性與主軸方向息息相關。
主軸方向為:row-起點在左邊,row-reverse-起點在右邊, column-起點在上邊,column-reverse-起點在下邊。
flex-start(預設值): 專案位於主軸起點。
flex-end:專案位於主軸終點。
center: 居中
space-between:兩端對齊,專案之間的間隔都相等。(開頭和最後的專案,與父容器邊緣沒有間隔)
space-around:每個專案兩側的間隔相等。所以,專案之間的間隔比專案與邊框的間隔大一倍。(開頭和最後的專案,與父容器邊緣有一定的間隔)
space-evenly:每個專案兩側的間隔相等。所以,專案之間的間隔和專案與邊框的間隔相同。
第一張圖是space-between的效果,第二張圖是space-around的效果,第三張圖是 space-evenly的效果。
(4)align-items屬性定義專案在交叉軸上如何對齊。
flex-start:交叉軸的起點對齊。
flex-end:交叉軸的終點對齊。
center:交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。(文字的行高、字型大小會影響每行的基線)
stretch(預設值):如果專案未設定高度或設為auto,將佔滿整個容器的高度。
(5)align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用。
(當專案換為多行時,可使用align-content取代align-items)
flex-start:與交叉軸的起點對齊。
flex-end:與交叉軸的終點對齊。
center:與交叉軸的中點對齊。
space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布。
space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch(預設值):軸線佔滿整個交叉軸。
HTML的彈性布局用法
彈性布局是html中十分方便的乙個布局,它可以讓結構中的內容自適應不同的解析度,簡化了許多繁瑣的 今天就簡單來介紹一下彈性布局的用法。彈性布局 display flex 顧名思義,就是讓內容變得像彈簧一樣具有彈性,在需要內容自適應的結構中,它是乙個極其方便的工具,它分為主軸和側軸兩個軸,就像x軸跟y...
html5 彈性布局一
1.彈性布局,解決高度塌陷的問題 2.彈性布局只對他的直接子元素控制,子元素的子元素不控制 3.彈性布局有主軸概念,當x軸為主軸,y為側軸,預設主軸的方向從左到右。flex direction row row reverse 從左到右 從右到左 當y軸為主軸時側軸為x軸,預設方向是從上到下。flex...
html頁面布局之flex彈性盒子
flexbox 布局 flexible box 意在提供乙個更為有效的方式來進行布局 對齊和分配乙個容器內元素之間的空間,即使他們的大小是未知的或者動態的。flex布局的主要思想是,讓容器能夠改變它的子元素的寬度 高度 甚至順序 從而更好地填充可用的空間 主要是為了適應所有種類的裝置和螢幕大小 最重...