Flex常用布局

項目介紹

flex簡單布局，導入css后直接使用

使用說明

1. 以行布局

.rbox

使用方法：

1

2

3

結果：

2. 以列布局

.cbox

使用方法：

1

2

3

結果：

3. 行布局自動換行

.rbox_wrap

使用方法：

1

2

3

4

5

6

結果：

4. 布局參數(shù)

.df_1 ~ .df_9

使用方法：

1

2

3

1

2

3

結果：

5. 內(nèi)容 X 軸布局(左右布局)

使用rbox:

.box_x_center 左右居中

.box_x_start 靠左顯示

.box_x_end 靠右顯示

使用cbox:

.box_x_center 上下居中

.box_x_start 靠上顯示

.box_x_end 靠下顯示

使用方法：

1

2

3

1

2

3

結果：

6. 內(nèi)容 Y 軸布局 (上下布局)

使用rbox:

.box_y_center 上下居中

.box_y_start 靠上顯示

.box_y_end 靠下顯示

使用cbox:

.box_y_center 左右居中

.box_y_start 靠左顯示

.box_y_end 靠右顯示

使用方法：

1

2

3

1

2

3

結果：

7. 內(nèi)容 X + Y 軸居中

.box_center

使用方法：

1

2

3

1

2

3

結果：

8. 單個內(nèi)容布局 (同上)

.box_1_center

.box_1_start

.box_1_end

使用方法：

1

2

3

1

2

3

結果：

9. 多行內(nèi)容布局 (配合 rbox_wrap 使用 ，沒有添加 cbox_wrap, 不常用，也可直接配合 box_x_xxx 和 box_y_xxx 使用)

.box_wrap_center 內(nèi)容居中

.box_wrap_start 靠左

.box_wrap_end 靠右

.box_wrap_space_a 項目之間的間隔都相等

.box_wrap_space_b 兩端對齊，項目之間的間隔都相等

使用方法：

1

2

3

4

5

6

1

2

3

4

5

6

1

2

3

4

5

6

1

2

3

4

5

6

結果：

10. 項目之間的間隔都相等

.box_space_a

11. 兩端對齊，項目之間的間隔都相等

.box_space_b

最后

內(nèi)容也可以使用flex布局

1

2

3

4

5

6

7

8

9

總結

以上是生活随笔為你收集整理的flex 引入css,Flex常用布局的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。