flex: 1;的妙用

首先  flex 是 flex-growflex-shrinkflex-basis的缩写。

当 flex 取值为一个非负数字,则该数字为 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%,如下两个是等同的:

.item{flex: 1;}

.item{

flex-grow: 1;

flex-shrink: 1;

flex-basis: 1;}

用途:

例如在表头有三个div被被应用到同一行后。但需要把第一个和第二个div排在最左边,第三个div需要排在最右边。可以直接给只给第二个div应用flex :1;(即把此行所有的剩余空间都给第二个div,第三个div自然就被挤到最右边了)

最新文章

  1. Expert 诊断优化系列-------------针对重点语句调索引
  2. jQuery jQuery对象与dom对象的转换
  3. R语言将字符串矩阵转化为数值型矩阵
  4. 使用Adivisor配置增强处理
  5. MS14-082引起的问题
  6. geotools导出shapefile出错: java.io.IOException: Current fid index is null, next must be called before write()
  7. 【Ibatis】总结各种使用技巧
  8. php验证字符串长度问题
  9. MemCache缓存和C#自带的Cache缓存
  10. CXF interceptor拦截顺序
  11. mysqli 启动出错
  12. Bootstrap3 表单-被支持的控件:文本域
  13. 【CF1146】Forethought Future Cup - Elimination Round
  14. 服务测试碰钉子Server GC
  15. fileInput插件上传文件
  16. springmvc(二) ssm框架整合的各种配置
  17. C#代码分析--阅读程序,回答问题
  18. 进阶之路(中级篇) - 018 基于arduino的简易版智能衣架
  19. zookeeper工作原理解析
  20. C# 计算当前时间距离今晚00:00:00还有多少分多少秒

热门文章

  1. WPF 插件开发(.NET Framework 3.5 System.Addin)
  2. 数据结构与抽象 Java语言描述 第4版 pdf (内含标签)
  3. 【ROC+AUC】
  4. Swift4.0复习扩展
  5. PRECONDITION_FAILED - inequivalent arg 'type' for exchange 'exchange' in vhost '/': received 'direct
  6. Ubuntu 新装服务器部署流程
  7. 【GStreamer开发】GStreamer基础教程02——GStreamer概念
  8. Andrew Ng机器学习课程9
  9. Django的小记
  10. [转帖]商用数据库之死:Oracle 面临困境