【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（顶部导航条根据内容自动撑开） 。