弾力性のあるフレックス記録プロセスカートリッジのレイアウト - 自動マージン

- センター通常、私たちは余裕が唯一のマージンを設定することができます使用：0自動;親要素に対する元素は、余裕を持って中央に、その後どのように垂直、水平方向の中央ことを示し、これは問題であり、次は余裕の例では、水平方向の中央と垂直方向の中央することができます： 【次のように溶液です]

自動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;
        }        
复制代码

リチウム効果パターンは、水平および垂直テキストの内側に中心があります。

CSS方法2 [自動マージン]：

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

リチウムの効果は、水平および垂直テキストの内側に中心があります。

自動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;
	}
复制代码

マージン比率（正当化 - コンテンツ/揃える自己）高い優先度を持っている：もちろん、それは非常に重要なポイントは、ことは注目に値します

ます。https：//juejin.im/post/5cf545056fb9a07ee30e051aで再現