记录flex弹性盒布局过程 - 自动margin

居中 - 平常我们使用margin 只可以设置margin:0 auto；表示该元素相对父元素水平居中，那么如何用margin 进行垂直居中，这是一个问题，下面就是关于margin 可以水平居中又可以垂直居中的实例 ： [解决办法如下]

自动margin实现 space-around

html:

<ul class="g-flex">
	 <li>liA</li>
	 <li>liB</li>
	 <li>liC</li>
	 <li>liD</li>
	 <li>liE</li>
</ul>
复制代码

css方法1： ：

.g-flex {
		width: 100%; height: 60px; list-style: none;
		display: flex;  
        justify-content: space-between;  
           /*对应的 需要将li设置flex:1; 文本居中;行高 */
        }
.g-flex li{
    	flex: 1; 
		text-align: center;
		line-height: 60px;
        }        
复制代码

效果样式是 li 里面的文字水平垂直居中。

css方法2 [自动margin]：

.g-flex{
         width: 100%; height: 60px; list-style: none;
		display: flex;
/* 要想使得li里的文字内容水平垂直居中 只需要将li设置 margin:auto; */
		}       
g-flex li{
        margin:auto;
        }
复制代码

效果同样也是 li 里面的文字水平垂直居中。

自动margin实现 space-between

html:

<ul class="test">
	<li>test1</li>
	<li>test2</li>
	<li>test3</li>
	<li>test4</li>
	<li>test5</li>
</ul>
复制代码

css方法1：

.test{
		height: 100px; list-style: none; 
		display: flex;
		justify-content: space-between;
	}
.test li{
        line-height: 100px; 
}	
复制代码

css方法2：

.test{
		height: 100px; list-style: none; 
		display: flex;
	}
.test li{
	    margin:auto ;
	}
li:first-child{
	    margin-left: 0;
	}
li:last-child{
		margin-right: 0;
	}
复制代码

当然，值得注意的是，很重要的一点： margin比(justify-content/align-self)优先级要高

转载于:https://juejin.im/post/5cf545056fb9a07ee30e051a