常用布局使用felx布局来实现

1. 一行显示,左边固定宽度右边自适应

html代码


    

felx布局实现左边固定宽度,右边自适应

左边固定宽度
右边自适应

css代码


2.一行显示,右边固定宽度左边自适应

html代码


    

felx布局实现右边固定宽度,左边自适应

左边自适应
右边固定宽度

css代码


3.一行显示,中间固定宽度左右两边自适应

html代码


    

felx布局实现中间固定宽度,两边自适应

左边自适应
中间固定宽度
右边自适应

css代码


4.一行显示,中间自适应两边固定宽度

html代码


    

felx布局实现中间自适应,两边固定宽度

左边固定宽度
中间自适应
右边固定宽度

css代码


5.一行只显示两个,超过的排下一行

html代码


    

felx布局实现一行显示两个,超过宽度换行

1
2
3
4
5

css代码


如有不对的地方或更好的方法请指出,感谢您的阅读

你可能感兴趣的:(常用布局使用felx布局来实现)