作者:四年夏至_175 | 来源:互联网 | 2020-08-08 13:26
本篇文章给大家带来的内容是关于css实现两边固定中间自适应布局的四种常用方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
解析四种常用方法以及原理:浮动、浮动内嵌 div、定位、flex。
浮动
原理:
浮动内嵌div
原理:
定位
我在中间,我用 margin 抵消左右两块定位元素占据空间
我在左边,我是定位元素
我在右边,我是定位元素
原理:
flex
我在左边
我在中间,flex: 1 自动占据剩余空间
我在右边
原理:
flex 布局,子元素默认水平排列。
flex: 0 1 auto -> 默认,占据空间不跟随父级放大,跟随变小,自身本来宽度
flex: 1 1 auto -> auto,占据空间跟随父级放大,同时跟随变小,自身本来宽度
flex: 0 0 auto -> none,占据空间不跟随父级放大,同时也不跟随变小,自身本来宽度
flex: 1 1 1 -> auto,占据空间跟随父级放大,同时跟随变小,并且自动占满剩余空间
以上就是css实现两边固定中间自适应布局的四种常用方法的详细内容,更多请关注 第一PHP社区 其它相关文章!