display :flex 弹性盒子布局要点
来源:互联网 发布:手机虚拟视频软件 编辑:程序博客网 时间:2024/06/01 09:00
弹性盒子布局有好几个用法
1.页面布局用到
<div style="display:flex"> <div style="flex:1">aaa</div> <div style="flex:1">bbb</div> <div style="flex:1">ccc</div></div>
当容器内部元素需要自适应宽,按父级百分比来布局的时候就可以用 flex布局。
与普通 左右浮动布局相比
优点:内部元素不需要固定宽,父元素宽变小时也不会掉下来。
2.未知宽的元素水平居中
<div style="display:flex"> <p style="margin:auto">我需要居中显示</p></div>
比绝对定位什么的好用多了,而且不知道元素的宽度也是可以让他水平居中的
其他
.container{ display :flex}.container{ display :inline-flex} // 行内元素的.container{ display :webkit-flex} // webkit内核 for safair
注意:当设置flex布局后,float vertical-align,clear 都将失效了
容器的属性
flex-direction flex-wrap flex-flow justify-content align-items align-content
1. flex-direction :决定主轴的方向,即项目的排列方向。
flex-direction:row/row-reverse/column/column-reverse
2.flex-wrap: 是否换行,默认情况不换行
flex-wrap:wrap/nowrap/wrap-reverse
3.flex-flow : 是 属性flex-direction 与 flex-wrap 的缩写,默认都是 row和 nowrap
4.jusity-content: 定义了项目在主轴上的对齐方式
jusity-content: flex-start // 从左到右
jusity-content: flex-end // 从右到左
jusity-content: center // 居中
jusity-content: space-between // 两端靠两边对齐,项目之间的间隔相等
jusity-content: space-around // 每个项目两侧的间隔相等,所以两个项目之间的距离是分别到两端的距离的两倍
5.align-items :属性定义项目在交叉轴上如何对齐
6.align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
项目的属性
order flex-grow flex-shrink flex-basis flex align-self
关于以上属性的细节 直接看:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
注意 一般写的过程中要考虑很多兼容问题
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-orient: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
- display :flex 弹性盒子布局要点
- flex弹性盒子布局
- 弹性盒子Flex布局
- display:flex弹性布局
- 弹性布局display:flex
- flex弹性盒子布局基础
- 弹性布局详解display:flex;
- 使用display:flex 弹性布局
- css3弹性盒子模型display:flex
- Flex 弹性盒子布局使用教程
- display:flex 意思是弹性布局
- display:flex 弹性伸缩布局详解
- css3弹性布局——display:flex
- css3盒子布局-定义盒子的弹性空间(box-flex)
- 移动端布局 Css3 弹性盒子模型封装 display:box;
- CSS3弹性盒子flex
- 弹性盒子模型(flex)
- CSS3 弹性盒子布局
- vector使用方法详解——一维的情况
- Java要看的书
- 【转向Javascript系列】从setTimeout说事件循环模型
- 从尾到头打印链表
- XSSFWorkbook和HSSFWorkbook的区别
- display :flex 弹性盒子布局要点
- android获取应用程序签名
- 解决ie9以下input 无placeholder问题
- Java程序猿 :谈谈自己的经历
- 插入排序算法的思想
- Java进阶之----LinkedList源码分析
- (三)Solr6.4.1配置文件详情
- Tiles框架学习
- 开通博客了