css3盒子flex
一、定义在容器上的属性有6个;
1、flex-direction;
决定主轴的方向,即项目的排列方向。
属性值:row、row-reverse、column、column-reverse;
2、flex-wrap;
定义如果一条轴线排不下,如何换行。
属性值:nowrap
(默认):不换行。wrap
:换行,第一行在上方。wrap-reverse
:换行,第一行在下方。
3、flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认为row nowrap。
4、justify-content
定义了项目在主轴上的对齐方式。
属性值:flex-start、flex-end、center、space-between、space-around。
5、align-items
定义项目在测轴上如何对齐。
flex-start、flex-end、center、stretch(项目的第一行文字的基线对齐)、baseline(如果项目未设置高度或设为auto,将占满整个容器的高度)。
6、align-content
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
flex-start、flex-end、center、stretch(轴线占满整个交叉轴)、space-between(与交叉轴两端对齐,轴线之间的间隔平均分布)、space-around(每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍)。
二、定义在项目上的属性。
1、order
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
2、flex-grow
属性定义项目的放大比例,默认为0
,即如果存在剩余空间,也不放大。
如果所有项目的flex-grow
属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow
属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
3、flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
如果所有项目的flex-shrink
属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink
属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。
4、flex-basis
flex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto
,即项目的本来大小。
它可以设为跟width
或height
属性一样的值(比如350px),则项目将占据固定空间。
5、flex
flex
属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。
该属性有两个快捷值:auto
(1 1 auto
) 和 none (0 0 auto
)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
6、align-self
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
该属性可能取6个值,除了auto,其他都与align-items属性完全一致。
摘自https://www.bbsmax.com/A/GBJrl0Ead0/
原网站图解很详细,我是记不住写下来,需要的时候拿过来就用,所以就不贴图片了,需要学习的可以到原网站学习;
最新文章
- Android Toolbar 开发总结
- go http.Get请求 http.Post请求 http.PostForm请求 Client 超时设置
- Linux平台开发指南
- JavaScript 代码风格指南
- count有关
- SQL中N $ # @的作用
- Linux中tty、pty、pts的概念区别
- 自定义QToolButton
- CentOS 6.5 + Nginx 1.8.0 + PHP 5.6(with PHP-FPM) 负载均衡源码安装 之 (二)PHP(PHP-FPM)安装篇
- jsp当参数为空的时候默认显示值
- uva12096 The SetStack Computer By sixleaves
- Design Pattern Chain of Reponsibility 责任链模式
- LeetCode——Container With Most Water
- WARN: Establishing SSL connection without server's identity verification is not recommended
- 类中被final修饰的成员变量需要初始化
- 【进阶1-4期】JavaScript深入之带你走进内存机制(转)
- OpenCV-Python入门教程5-阈值分割
- JavaScript图形库
- c#中用lua脚本执行redis命令
- NPM 上传自己的包
热门文章
- HTML+CSS教程(二)frameset框架和iframe内嵌
- 改善 Python 程序的 91 个建议
- 实现Nginx Upload 模块 功能上传文件。
- Win7+Linux双系统,完美解决删除Linux后出现的任何问题!
- curl请求curl_exec返回false,curl_error返回空
- T-SQL字符串函数
- java中的Volatile关键字使用
- rabbitMQ本地安装(Mac版)
- 《LabVIEW 虚拟仪器程序设计从入门到精通(第二版)》一1.3 小结
- require.context的妙用