HTML之弹性布局

弹性布局能有效的帮助我们解决一些盒子元素的排列。

设置方式 display: flex;

水平方向居中排列 justify-content: center;（flex-star、center、flex-end、space-between 、space-around）

{

flex-star 默认起始位置对齐

center 居中排列

flex-end 居右排列，结束位置对齐

space-between 两边均匀排列，两边不留白

space-around 两边均匀排列，两边留白且对称

}

竖直方向居中排列 align-items: center;（flex-start、flex-end、center、baseline、stretch）

{

flex-start 默认起始位置对齐 flex-end 向下排列 center    居中排列 baseline 向上排列 stretch 一般情况下等效于flex-start

}