【CSS】flex 弹性盒 中的 flex:1 和 flex:auto 的区别

双飞翼布局，左右两边，中间自适应拉伸。

父盒子

display: flex; justify-content: space-between;

中间搜索框

width:100%

---

也可以直接父盒子给弹性盒，中间搜索框直接flex:1;即可完成布局

    flex:  为三个属性的缩写    flex-grow, flex-shrink, flex-basis       flex-grow:     可拉伸 默认0       flex-shrink:   可压缩 默认1       flex-basis:     当前元素的宽度  默认auto       flex:1 ---其实应写成，       flex-grow: 1;       flex-shrink: 1;       flex-basis: 0%  (忽略自身宽度)             flex:auto ---其实应写成，       flex-grow: 1;       flex-shrink: 1;       flex-basis: auto（元素自身宽度）        flex:1 和flex:auto 的区别：        由于在这里只有一个元素，所以效果是一样的。两者的区别是 flex-basis属性        如果是多个元素，则flex:1      代表剩余空间均分，即去除内外边距、边框，但是忽略自身元素宽度等。                                    flex:auto 去除内外边距、边框，但是要加上自身元素宽度。   总结：如果你要完全等分布局使用flex:1 ，如果你要根据内容宽度动态分配宽度则使用flex:auto（顶部导航条根据内容自动撑开） 。