3回答

好帮手慕星星

2020-01-17

同学你好，问题解答如下：

1、老师明白同学的想法，但是默认情况下虽然是水平的，但是位置不对

效果如下

因为这时候没有任何的样式，所以默认在左上角，我们仍然是需要调整位置来显示到中间位置。

课程中使用flex-center方法的目的是为了让元素使用flex布局来实现在水平垂直居中位置显示（同学也可以使用其它方法），可以不传参数看看效果，还是水平的：

但是课程中要的是上下垂直位置显示，所以传的参数是column：

2、另外课程中还设置了上间距，将加载图标与文字之间的距离拉开了：

但是当flex-center方法不传参数的时候效果上会有一点问题

没有对齐居中，因为文字有上间距6px，所以课程中添加了动态类名mine-loading-inline

• 如果图片和文字上下垂直居中显示的时候，mine-loading-inline不生效，这部分无作用

  

  图片和文字之间有上下间距6px

• 如果图片和文字水平居中显示的时候，mine-loading-inline生效，就会去掉上下间距6px。

可能会有一点绕，如果同学不想要这个6px样式，可以不设置，也不使用mine-loading-inline动态类，那么调用flex-center的方法就是传参和不传参的问题。

3、课程中其实最终不是通过控制flex-center传参实现位置变化的，是通过inline这个动态类，在slider.vue中使用loading组件时，如果传了inline，那么值就是true，就会启用mine-loading-inline动态类，水平显示；如果没有传参，默认值为false，就不会启动mine-loading-inline动态类，上下垂直显示：

同学可以再理解下，祝学习愉快！

0

慕婉清9255496

提问者

2020-01-17

首先默认情况下是水平的，然后再设置垂直居中，最后通过动态又改为水平居中，可以直接使用默认？

0

好帮手慕星星

2020-01-17

同学你好，flex-center这个方法需要通过传入参数设置主轴是水平方向还是垂直方向：

并且这个方法中还设置了元素为flex布局，主轴以及交叉轴上都是居中对齐的。代码中调用flex-center方法传入的参数是column，也就是主轴是垂直方向：

这样显示的

下面这部分样式的设置取决于.mine-loading-inline 这个类名是否存在

这个类名是动态设置的：

默认为false，也就是.mine-loading-inline 这个类名不设置，下面的样式不会生效，主轴也不会改变。如果inline的值改为true，效果就是水平对齐了，自己可以测试下。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0