記錄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)優先級要高