Flex 布局 入門

2021-08-17 22:49:42 字數 1362 閱讀 5312

.box


.box


.box
垂直的交叉軸（cross axis）

flex-wrap

flex-flow

justify-content

align-items

align-content

.box
row-reverse：主軸為水平方向，起點在右端。

column：主軸為垂直方向，起點在上沿。

column-reverse：主軸為垂直方向，起點在下沿。

.box
wrap：換行，第一行在上方。

wrap-reverse：換行，第一行在下方。

.box


.box
flex-end：右對齊。

center： 水平居中。

space-between：兩端對齊，專案之間的間隔都相等。

space-around：每個專案兩側的間隔相等。所以，專案之間的間隔是專案與邊框的間隔的 2 倍。

.box
flex-end：交叉軸的終點對齊（底部對齊）。

center：交叉軸的中點對齊。（垂直居中）

baseline：專案的第一行文字的基線對齊。

stretch（預設值）：如果專案未設定高度或設為 auto，將佔滿整個容器的高度。

.box
flex-end：與交叉軸的終點對齊。

center：與交叉軸的中點對齊。

space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。

space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

stretch（預設值）：軸線佔滿整個交叉軸。

flex-grow

flex-shrink

flex-basis

flex

align-self

.item


.item


.item


.item


.item


.item

flex布局快速入門

傳統布局的核心是盒子模型，依賴 display 屬性 position 屬性 float 屬性。可以看出來傳統布局非常容易實現像 word 左對齊，右對齊這樣的功能，可以說，傳統布局更適合於文字排版。flex 是 flexible box 的縮寫，可以看做彈性的盒子模型。使用 flex 首先要設定父...

Flex布局 彈性布局 基礎入門

flex是flexble box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 他所有子元素自動成為容器成員，簡稱為 flex 專案 flex item 簡稱 專...

預設布局換行 Flex布局入門

主要提供簡便 完整 響應式布局解決方法，設定flex布局後元素的 float clear vertical align屬性將失效 flex direaction 決定主軸的方向 引數 row 預設值 主軸為水平方向，起點在左端 row reverse 同上，起點在右端 column 主軸為垂直方向，...