盒子模型基本使用Demo

CSS3盒子模型的基本使用

元素的排列方式(box-orient)

1、垂直

1

2

3

2、水平

1

2

3

设置horizontal时元素的对齐方式(box-align)

1、居上

1

2

3

2、居中

1

2

3

3、居下

1

2

3

设置vertical时元素的对齐方式(box-align)

1、居左

1

2

3

2、居中

1

2

3

3、居右

1

2

3

设置horizontal时元素的对齐方式(box-pack)

1、居左

1

2

3

2、居中

1

2

3

3、居右

1

2

3

4、分散

1

2

3

设置vertical时元素的对齐方式(box-pack)

1、居上

1

2

3

2、居中

1

2

3

3、居下

1

2

3

4、分散

1

2

3

元素分配父容器剩余空间(box-flex)

1、未设置子元素内容

1

2

3

2、设置padding=0 10px后

1

2

3

元素的显示顺序方式(box-ordinal-group)

1、未设置box-ordinal-group

1

2

3

2、设置box-ordinal-group

1

2

3

元素是否换行的显示(box-lines)

1、设置single

1

2

3

2、设置multiple

1

2

3

#428BCA