hooyantsing's Blog

P148_22_栅格整体对齐处理方式

字数统计: 149阅读时长: 1 min
2020/04/21

P148 22 栅格整体对齐处理方式

控制整个栅格排列方向。

和弹性盒模型(display:flex)一样。

justify-content

控制水平方向栅格空间的排列方式。

start

默认,靠向栅格起始位置。

f422b8b8ddf3d0d82c7bf21f922e2b55.png

end

靠向栅格结束位置。

1f2c075002cd72c12cf77bc3f868cb10.png

center

靠向栅格中间。

aa67556f35cb89ed4b7eada4eb679354.png

space-around

平均分配,中间间隔是两侧间隔的两倍。

9b35669aafe3b47de2ba05c275065087.png

space-between

平均分配,靠两侧。

8e272be463c8124eaf579e3fe71d0f0f.png

space-evenly

平均分配,间隔相等。

5dee56bf7160cb0e07df1c5728d729d1.png

align-content

控制垂直方向栅格空间的排列方式。

start

默认,靠向顶部。

end

靠向底部。

b1e5f666e391e961ef065649bee2d0b3.png

center

靠向栅格中间。

b14cf3fdd2b173aa20f7ad9409805252.png

CATALOG