CSS06 彈性布局

2021-10-02 04:27:41 字數 1452 閱讀 2411

彈性布局:一種布局方式,主要解決某個元素中子元素的布局方式

父元素設定了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 種機制來設定盒子的擺放位置,分別是普通流 標準流 浮動和定位,其中 普通流 標準流 行內元素會按照順序,從左到右順序排列,碰到父元素邊緣則自動換行 浮...