CSS ,flex: 1的用处
2024-08-26 21:57:46
flex: 1;的妙用
首先 flex
是 flex-grow
、flex-shrink
、flex-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自然就被挤到最右边了)
最新文章
- Expert 诊断优化系列-------------针对重点语句调索引
- jQuery jQuery对象与dom对象的转换
- R语言将字符串矩阵转化为数值型矩阵
- 使用Adivisor配置增强处理
- MS14-082引起的问题
- geotools导出shapefile出错: java.io.IOException: Current fid index is null, next must be called before write()
- 【Ibatis】总结各种使用技巧
- php验证字符串长度问题
- MemCache缓存和C#自带的Cache缓存
- CXF interceptor拦截顺序
- mysqli 启动出错
- Bootstrap3 表单-被支持的控件:文本域
- 【CF1146】Forethought Future Cup - Elimination Round
- 服务测试碰钉子Server GC
- fileInput插件上传文件
- springmvc(二) ssm框架整合的各种配置
- C#代码分析--阅读程序,回答问题
- 进阶之路(中级篇) - 018 基于arduino的简易版智能衣架
- zookeeper工作原理解析
- C# 计算当前时间距离今晚00:00:00还有多少分多少秒
热门文章
- WPF 插件开发(.NET Framework 3.5 System.Addin)
- 数据结构与抽象 Java语言描述 第4版 pdf (内含标签)
- 【ROC+AUC】
- Swift4.0复习扩展
- PRECONDITION_FAILED - inequivalent arg 'type' for exchange 'exchange' in vhost '/': received 'direct
- Ubuntu 新装服务器部署流程
- 【GStreamer开发】GStreamer基础教程02——GStreamer概念
- Andrew Ng机器学习课程9
- Django的小记
- [转帖]商用数据库之死:Oracle 面临困境