常見的margin: 0 auto;可以將block元素水平居中，實際上auto margins可不止這一點用處呢吨岭。在flexbox布局中拉宗，auto margins不僅能實現(xiàn)左、右對齊和水平居中未妹，還能實現(xiàn)上簿废、下對齊和垂直居中，甚至可以在同一個container中同時實現(xiàn)多種對齊方式络它，布局功能頗為強大。在很多情況下化戳，auto margins比align與justify系列對齊屬性（alignment properties）更加簡潔和巧妙单料，還不容易出錯！
在flexbox布局中点楼，auto margins之所以有這么強大的功能扫尖，是因為它能夠?qū)⑹Ｓ嗫臻g（free space）全部“吃掉”。沒有了剩余空間掠廓，justify-content與align-self屬性也無從下手换怖，自然變得無效了。
來看幾個例子吧～
Example 1: 實現(xiàn)flex元素的響應式水平垂直居中
<head>
<style>
.container {
height: 300px;
background-color: lavender;
display: flex;
flex-wrap: wrap;
}
.item {
background-color: cornflowerblue;
width: 100px;
height: 50px;
margin: auto;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 1</div>
<div class="item">Item 6</div>
</div>
</body>
Example 2: 實現(xiàn)同一個flex container中多種對其方式并存蟀瞧。特別適用于導航欄或表單欄沉颂，可將某些元素左對齊条摸，另一些元素右對齊。
<head>
<style>
.nav {
height: 100px;
background-color: lavender;
display: flex;
flex-wrap: wrap;
}
.item {
background-color: cornflowerblue;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
margin: auto 0;
}
.other {
margin-left: auto;
}
.content {
background-color: mistyrose;
font-size: 5em;
width: 100%;
height: 300px;
text-align: center;
line-height: 300px;
}
</style>
</head>
<body>
<div class="nav">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item other">Item 6</div>
</div>
<div class="content">CONTENT</div>
</body>
類似的铸屉，使用auto margins可以更加簡單地實現(xiàn)如下圖的常見效果钉蒲。
圖片出自http://www.flexboxpatterns.com/home，原效果并沒有使用auto margins實現(xiàn)彻坛。
關(guān)于auto margins算法的一點想法
下面的內(nèi)容有點學術(shù)啦顷啼，請做好心理準備～
Flex布局算法中對auto margins的對齊原理有如下解釋，原文是英文昌屉，我盡量準確翻譯：
在主軸（main axis）方向
- 如剩余空間為正數(shù)钙蒙，則剩余空間會被平均分配在擁有主軸方向auto margin(s)的flex元素之間。
- 如剩余空間為負數(shù)怠益，則將主軸方向的auto margin(s)設定為‘0’仪搔。
在側(cè)軸（cross axis）方向
- 如果擁有側(cè)軸方向auto margins(s)的元素的outer cross size（計算時將auto margins(s)作‘0’計算）小于其所在的flex line的cross size，則將剩余空間平均分配給auto margin(s)蜻牢。
- 否則，如果側(cè)軸方向
block-start或inline-start方向的margin為auto偏陪，則將其設定為‘0’抢呆。設置相對方向的margin值，使此元素的outer cross size等于其所在的flex line的cross size笛谦。
我不太明白算法解釋最后一句“設置相對方向的margin值抱虐，使此元素的outer cross size等于其所在的flex line的cross size”的意思。
補充知識：
在CSS Writing Modes中饥脑，block-start方向是根據(jù)書寫模式屬性（writing-mode）定義的block flow direction的開始端恳邀，在上至下書寫模式下定義為頂端，在左至右書寫模式下定義為左端灶轰，在右至左書寫模式下定義為右端谣沸，inline-start方向由inline base direction屬性定義，左至右則開始端定義為左端笋颤，右至左則開始端定義為右端乳附。
從字面上分析，剛剛那最后一句的意思似乎是如果flex元素超高10px伴澄，相對方向的margin則會被設置為-10px赋除，從而將outer cross size減小10px至與flex line的cross size相等，但我目前不知該如何核實這個理解非凌。能夠看到的結(jié)果是举农，側(cè)軸（cross axis）方向的margin: auto與align-self: center產(chǎn)生了不同的效果。
Example 3: auto margins 與align-self: center的區(qū)別敞嗡。
<head>
<style>
.container {
height：300px;
margin: 0 auto;
}
.box {
width: 160px;
height: 300px;
display: flex;
flex-direction: column;
background-color: cornflowerblue;
padding: 10px;
margin: 30px auto;
}
.item {
background-color: lavender;
height: 50px;
margin-top: auto;
margin-bottom: auto;
align-self: flex-start;
text-align: center;
line-height: 50px;
padding-left: 10px;
padding-right: 10px;
}
.a {
margin: auto;
}
.b {
align-self: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">margin: auto
<div class="item a">Item_1</div>
<div class="item a">Item_2_LongLongLongLongLongLong</div>
<div class="item a">Item_3</div>
</div>
<div class="box">align-self: center
<div class="item b">Item_4</div>
<div class="item b">Item_5_LongLongLongLongLongLong</div>
<div class="item b">Item 6</div>
</div>
</div>
</body>
在這個例子中颁糟，兩個藍色box的cross axis均為水平方向祭犯，上方box中元素使用margin: auto進行水平居中，下方box中元素使用align-self: center進行水平居中滚停。margin: auto（margin-left: auto或margin-right: auto也可實現(xiàn)沃粗，但將會影響普通長度元素的水平居中）可將超長元素block-start方向、即左邊的margin設定為‘0’键畴，從而使元素具有完全的可讀性最盅；而align-self: centre將超長元素進行了絕對居中，在不需要可讀性的情況下可能更有優(yōu)勢起惕。
看過這些例圖涡贱，auto margins的使用方法應該不會忘了吧。最后再來提個醒兒：
- auto margins僅針對當前的flex item惹想，對其子元素無效问词。
- 在計算
flex-bases與flexible lengths （main size與cross size）時，auto margins取值為0嘀粱。 - auto margins優(yōu)先于
justify-content與align-self激挪。由于相應方向上的剩余空間已分配給auto margins，justify-content與align-self將無效锋叨。 - auto margins對溢出的（overflowing）flex item無效垄分。
//如需轉(zhuǎn)載，請聯(lián)系作者//
