flex 中的margin

在flex布局中，如果使用了自动的margin（即margin: auto），它的计算值会根据不同的情况而有所不同。在bfc中，如果margin-top和margin-bottom的值都是auto，那么它们的值都会被设置为0。而在ffc中，如果margin-top和margin-bottom的值都是auto，它们会平均分配垂直方向上的剩余空间。如果只有单个方向上使用了自动的margin，那么它的计算值会是该方向上的剩余空间。需要注意的是，使用了自动的margin的flex子项目，它们父元素设置的justify-content以及它们本身的align-self将不再生效。常用的flex布局属性包括父容器的display:flex、justify-content、align-self、flex-wrap、flex-direction、flex-flow、align-content，以及子元素的flex、align-self、flex-basis、flex-grow、flex-shrink、order。另外，可以将display:flex替换成display:inline-flex、grid或inline-grid来改变布局方式。如果想要在垂直方向上居中元素，可以使用margin: auto来实现。在flex布局中，任何正处于空闲的空间都会分配到自动margin中去，可以通过设置margin: auto来使元素在垂直方向上居中。