导航栏布局和flex+auto margins(梁王的开发笔记)

前言

今天总结一下导航栏里面flex和auto margins的应用

实战

效果图

效果图

比较常见的布局，左侧是导航栏，右边有一部分是搜索栏，最右边是profile之类的

分析

如果用flex比较常见的方法是左侧导航栏为一个div，右边搜索栏和profile栏为一个div然后justify-content设为space-between。不过这种办法显然把搜索栏和profile划在一个div上了，我觉得这样很不好，我希望我的结构是三个div，而且如果我希望搜索栏能够有一定的自适应的话这样也是最好的，但怎么保证search会紧挨着profile而且左边还能空出一段距离呢？

<div class="header">
    <div class="header-nav"></div>
    <div class="header-search"></div>
    <div class="header-profile"></div>
</div>

auto margins in flex

一般的，对于块级元素，想让其居中于父元素，可以直接写margin: auto; margin就会自动扩充整个父元素剩下的部分。
在flexbox布局中，auto margins之所以有这么强大的功能，是因为它能够将剩余空间（free space）全部“吃掉”。没有了剩余空间，justify-content与align-self属性也无从下手，自然变得无效了。

类似效果

flexbox布局算法中的解释

https://drafts.csswg.org/css-flexbox-1/#layout-algorithm
在主轴（main axis）方向

• 如剩余空间为正数，则剩余空间会被平均分配在拥有主轴方向auto margin(s)的flex元素之间。
• 如剩余空间为负数，则将主轴方向的auto margin(s)设定为‘0’。

在侧轴（cross axis）方向

• 如果拥有侧轴方向auto margins(s)的元素的outer cross size（计算时将auto margins(s)作‘0’计算）小于其所在的flex line的cross size，则将剩余空间平均分配给auto margin(s)。
• 否则，如果侧轴方向block-start或inline-start方向的margin为auto，则将其设定为‘0’。设置相对方向的margin值，使此元素的outer cross size等于其所在的flex line的cross size。

总结

本文章介绍了头部的一个flex布局，并引入了auto margins的概念。然后我发现还是文档全，下个月我打算解析一下flexbox的文档。

参考资料

http://www.zcfy.cc/article/587
http://www.jianshu.com/p/beeb93a76830
https://drafts.csswg.org/css-flexbox-1/#layout-algorithm