flexbox备忘
2016-04-06 18:22
197 查看
伸缩项目的父元素:
display:flex || display:inline-flex
fiex-direction: row(默认) | row-reverse | column | column-reverse
flex-wrap : nowrap(默认) | wrap | wrap-reverse
flex-flow(flex-direction+flex-wrap): row nowrap (默认)
主轴对齐方式(横向):
justify-content: flex-start(默认) | center | flex-end
space-between | space-around
侧轴对齐方式(竖向):
align-items:flex-start | center | flex-end
baseline | stretch(默认)
多行,竖向(必须设置flex-wrap:wrap才有效):
align-content:flex-start | center | flex-end
space-between | space-around
stretch(默认)
伸缩项目的子元素:
order: 0
flex-grow:1(不可以有负数) 放大一定的倍数
flex-shrink:1(不可以有负数) 缩小一定的倍数
flex-basis:0 数字px,百分比(不可以负数) 剩余的空间按比率进行伸缩
flex: flew-grow flew-shrink flew-basis的组合;
flex:0 1 auto == flex:initial == flex:0 auto(默认值);
flex:none == flex:0 0 auto;
flex:auto == flex:1 1 auto;
align-self(跟align-items一样):
flex-start | center | flex-end | baseline | stretch
参考资料:
http://www.w3cplus.com/css3/a-guide-to-flexbox.html http://www.w3cplus.com/css3/a-guide-to-flexbox-new.html https://www.w3.org/html/ig/zh/css-flex-1/#flex-basis https://segmentfault.com/q/1010000004080910
display:flex || display:inline-flex
fiex-direction: row(默认) | row-reverse | column | column-reverse
flex-wrap : nowrap(默认) | wrap | wrap-reverse
flex-flow(flex-direction+flex-wrap): row nowrap (默认)
主轴对齐方式(横向):
justify-content: flex-start(默认) | center | flex-end
space-between | space-around
侧轴对齐方式(竖向):
align-items:flex-start | center | flex-end
baseline | stretch(默认)
多行,竖向(必须设置flex-wrap:wrap才有效):
align-content:flex-start | center | flex-end
space-between | space-around
stretch(默认)
伸缩项目的子元素:
order: 0
flex-grow:1(不可以有负数) 放大一定的倍数
flex-shrink:1(不可以有负数) 缩小一定的倍数
flex-basis:0 数字px,百分比(不可以负数) 剩余的空间按比率进行伸缩
flex: flew-grow flew-shrink flew-basis的组合;
flex:0 1 auto == flex:initial == flex:0 auto(默认值);
flex:none == flex:0 0 auto;
flex:auto == flex:1 1 auto;
align-self(跟align-items一样):
flex-start | center | flex-end | baseline | stretch
参考资料:
http://www.w3cplus.com/css3/a-guide-to-flexbox.html http://www.w3cplus.com/css3/a-guide-to-flexbox-new.html https://www.w3.org/html/ig/zh/css-flex-1/#flex-basis https://segmentfault.com/q/1010000004080910
相关文章推荐
- 关于如何让li居中的解决方法
- 字符串反转输出的实现
- The type javax.servlet.http.HttpServletRequest cannot be resolved.
- lightoj 1233 - Coin Change (III) 多重背包+二进制优化
- opencv轮廓检测之椭圆检测-----算法篇(5)---LAPLACIAN算子
- 南阳题目6-喷水装置(一)
- Atitit.有分区情况下的表查询策略流程
- Android初试--Android中的BroadcastReceiver(2)
- 宝宝上幼儿园了
- Andorid 6.0权限管理遇到的坑
- java 富文本编辑内容去除格式 正则表达式
- Atitit.有分区情况下的表查询策略流程
- Atitit.有分区情况下的表查询策略流程
- AJAX
- 怎么判断大小端呢?
- padding-left --左内边距
- Atitit.判断元素是否显示隐藏在父元素 overflow
- android popupWindow使用
- <二代测序> 下载 NCBI sra 文件
- Android应用层View绘制流程与源码分析,性能优化