问题

源码中这三行代码是啥意思？

display: flex;
justify-content: space-between;
align-items: center;

答案

html+css:display:flex属性

块元素、行内元素、行内块元素

display: flex;这行代码将ID为layout-header的元素设置为弹性盒子，在没有设置弹性盒子之前，页面是这样的：

可以看到没有设置flex属性时，子元素已经超出父元素的高度。

设置display: flex;之后页面：

可以看出子元素都在父元素的高度范围之内，而且子元素都变为了行内块元素。

justify-content: space-between;这行代码设置子元素在主轴对齐的方式，设置为两端对其，中间间隔相等。

align-items: center;决定了子元素在交叉轴对齐的方式，也就是以水平基准线进行对齐。

标签：flex,查漏,行内,元素,设置,补缺,对齐,display
来源： https://www.cnblogs.com/Huang-zihan/p/16397452.html