浅谈display:flex
2016-07-25 19:16
239 查看
display:flex 意思是弹性布局
首先flex的出现是为了解决哪些问题呢?
一、页面行排列布局
像此图左右两个div一排显示
可以用浮动的布局方式
html部分
css部分
这种布局有两个缺点
1.需要一个空div来清除浮动,当然也可以选用其他清除浮动的方法,但此处需要清除浮动才能不影响下面的布局。
2.当.left,.right 的宽度是固定的,浏览器宽度变的过窄时,.right会被挤到下面
用display:flex布局,可以解决这两个缺点
刚吃的html部分不变,css部分
父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同
1:2分时
同样分为3份时
flex是所占的比例,这样的布局就方便很多。
二、div上下左右居中
我之前写过div上下左右居中的几种方法
其中有一个写了margin:auto auto;这个方法的使用前提就是先把父元素设为display:flex
html部分
css部分
在未知div宽高时,用这种方法比较方便
这是我在使用flex布局时用到的两个比较常见又好用的例子
首先flex的出现是为了解决哪些问题呢?
一、页面行排列布局
像此图左右两个div一排显示
可以用浮动的布局方式
html部分
css部分
这种布局有两个缺点
1.需要一个空div来清除浮动,当然也可以选用其他清除浮动的方法,但此处需要清除浮动才能不影响下面的布局。
2.当.left,.right 的宽度是固定的,浏览器宽度变的过窄时,.right会被挤到下面
用display:flex布局,可以解决这两个缺点
刚吃的html部分不变,css部分
父级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父级元素。占的比例相同
1:2分时
同样分为3份时
flex是所占的比例,这样的布局就方便很多。
二、div上下左右居中
我之前写过div上下左右居中的几种方法
其中有一个写了margin:auto auto;这个方法的使用前提就是先把父元素设为display:flex
html部分
css部分
在未知div宽高时,用这种方法比较方便
这是我在使用flex布局时用到的两个比较常见又好用的例子
相关文章推荐
- window.open参数完全手册
- java内存的主要划分
- android - JNI - 一维数组、二维数组的访问与使用
- 信号量、互斥体和自旋锁
- C实现bitmap位图
- [.NET开发] winform开发中使用datagridview遇到的问题
- RabbitMQ总结
- C语言 用free函数释放在堆上申请的空间,这个函数到底做了什么
- IDA逆向常用宏定义
- java语言缺漏总结
- Yii框架中使用sphinx搜索及关键字标红
- jQuery ajax 302跨域
- ASP.NET输出JSON格式数据
- Java工具箱之SpringMVC拦截器
- 160725
- lightoj 1025【区间DP】
- MySQL数据库MyISAM和InnoDB存储引擎的比较【转载】
- [Java代码] Java实现直接插入排序和折半插入排序算法示例
- tjut 4971
- 用python实现webshark(实现web版的wireshark功能)