彈性布局:一種布局方式,主要解決某個元素中子元素的布局方式
父元素設定了display:flex,讓所有子元素變成彈性布局
彈性布局的相關概念
(1)容器:設定了display:flex的元素,稱為容器;容器本身不是彈性布局.
(2)專案:真正發生彈性布局的子元素們稱為專案
(3)主軸(4條):專案們排列方向的一條軸
專案們如果哪找橫向排列,主軸是x軸.
專案們如果按照縱向排列,主軸是y軸
專案們在主軸上的排列方式,稱為主軸的起點和終點.
(4)交叉軸(2條):永遠與主軸垂直的軸,專案們在交叉軸上的排列方式稱為交叉軸的起點和終點.
語法:將乙個元素設定display:flex.它本身就變成了彈性容器,他的兒子們就變成了彈性專案,
display:flex–將塊級元素設定為容器
display:inline-flex–將行內元素設定為容器
容器的text-align失效,
專案的float/clear/vertical-align全部生效
容器的樣式屬性
①主軸的方向:
flex-direction:row/row-reverse(x軸/x軸翻轉)
flex-direction:column/column-reverse(y軸/y軸翻轉)
②專案的換行
主軸方向放不下所有專案要不要換行
flex-wrap:nowrap(預設)/wrap(正常換行)/wrap-reverse(換行並翻轉)
③主軸方向和換行的簡寫
flex-flow:direction wrap;
④專案們在主軸上的排列方式
justify-content:flex-start(預設,主軸起點對齊)/flex-end(主軸終點對齊)/center(主軸中心對齊)/space-around(每個外邊距相同)/space-between(兩端對齊,兩端無空白)
⑤專案們在交叉軸上的排列方式
align-items:flex-start(預設，交叉軸起點對齊)/flex-end(交叉軸終點對齊)/center（交叉軸中心）/stretch(專案在交叉軸上沒有尺寸，充滿交叉軸)
專案的樣式屬性
作用在某乙個專案上，不影響其他專案
①設定專案在主軸上的排列順序
order:無單位數字，值越小，越靠近起點
②flex-grow：
如果容器在株洲方向，有剩餘空間，專案會變大，設定數字越大，變大的越快
無單位數字，預設為0
③flex-shrink：如果容器在主軸方向，空間不夠時，專案會縮小，設定的數字越大，縮小越快
無單位整數，預設值為1
與flex-wrap：wrap衝突
④單獨設定某乙個專案的交叉軸對齊方式
align-self:flex-start/flex-end/center/stretch/auto(使用容器定義的align-items的值)
CSS 06 彈性布局
1 彈性布局 彈性布局 一種布局方式,主要解決某個元素中子元素的布局方式 父元素設定了display flex,讓所有子元素變成彈性布局 彈性布局的相關概念 1 容器 設定了display flex的元素,稱為容器 容器本身不是彈性布局.2 專案 真正發生彈性布局的子元素們稱為專案 3 主軸 4條 ...
CSS 06核心 浮動
人生苦短，要學就只學有用的 前端教學 css 1 css核心 浮動float 理解應用 網頁布局的核心 就是用 css 來擺放盒子。css 提供了3 種機制來設定盒子的擺放位置，分別是普通流 標準流 浮動和定位，其中 普通流 標準流 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行 浮...
CSS 06核心 浮動
人生苦短，要學就只學有用的 前端教學 css 1 css核心 浮動float 理解應用 網頁布局的核心 就是用 css 來擺放盒子。css 提供了3 種機制來設定盒子的擺放位置，分別是普通流 標準流 浮動和定位，其中 普通流 標準流 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行 浮...