查漏补缺——flex属性

问题

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

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

答案

html+css:display:flex属性

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

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

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

设置display: flex;之后页面：

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

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

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