前言
今天總結(jié)一下導(dǎo)航欄里面flex和auto margins的應(yīng)用
實(shí)戰(zhàn)
效果圖
比較常見的布局，左側(cè)是導(dǎo)航欄，右邊有一部分是搜索欄，最右邊是profile之類的
分析
如果用flex比較常見的方法是左側(cè)導(dǎo)航欄為一個(gè)div共虑，右邊搜索欄和profile欄為一個(gè)div然后justify-content設(shè)為space-between。不過(guò)這種辦法顯然把搜索欄和profile劃在一個(gè)div上了呀页，我覺得這樣很不好妈拌，我希望我的結(jié)構(gòu)是三個(gè)div，而且如果我希望搜索欄能夠有一定的自適應(yīng)的話這樣也是最好的蓬蝶，但怎么保證search會(huì)緊挨著profile而且左邊還能空出一段距離呢尘分？
<div class="header">
<div class="header-nav"></div>
<div class="header-search"></div>
<div class="header-profile"></div>
</div>
auto margins in flex
一般的猜惋，對(duì)于塊級(jí)元素，想讓其居中于父元素培愁，可以直接寫margin: auto; margin就會(huì)自動(dòng)擴(kuò)充整個(gè)父元素剩下的部分惨奕。
在flexbox布局中，auto margins之所以有這么強(qiáng)大的功能竭钝，是因?yàn)樗軌驅(qū)⑹Ｓ嗫臻g（free space）全部“吃掉”。沒有了剩余空間雹洗，justify-content與align-self屬性也無(wú)從下手香罐，自然變得無(wú)效了。
flexbox布局算法中的解釋
https://drafts.csswg.org/css-flexbox-1/#layout-algorithm
在主軸（main axis）方向
- 如剩余空間為正數(shù)时肿，則剩余空間會(huì)被平均分配在擁有主軸方向auto margin(s)的flex元素之間庇茫。
- 如剩余空間為負(fù)數(shù)，則將主軸方向的auto margin(s)設(shè)定為‘0’螃成。
在側(cè)軸（cross axis）方向
- 如果擁有側(cè)軸方向auto margins(s)的元素的outer cross size（計(jì)算時(shí)將auto margins(s)作‘0’計(jì)算）小于其所在的flex line的cross size旦签，則將剩余空間平均分配給auto margin(s)。
- 否則寸宏，如果側(cè)軸方向block-start或inline-start方向的margin為auto宁炫，則將其設(shè)定為‘0’。設(shè)置相對(duì)方向的margin值氮凝，使此元素的outer cross size等于其所在的flex line的cross size羔巢。
總結(jié)
本文章介紹了頭部的一個(gè)flex布局，并引入了auto margins的概念罩阵。然后我發(fā)現(xiàn)還是文檔全竿秆，下個(gè)月我打算解析一下flexbox的文檔。
參考資料
http://www.zcfy.cc/article/587
http://www.reibang.com/p/beeb93a76830
https://drafts.csswg.org/css-flexbox-1/#layout-algorithm
