flex总结一下
display:flex:规定元素是flex布局,里面的元素自然会像浮动一样横向排列;
flex-direction:row | row-reverse | column | column-reverse;规定子元素是横向排列还是纵向排列;
flex-wrap: nowrap | wrap | wrap-reserve;规定子元素的宽度超过父元素时,换行还是不换行,或则是反向换行;
flex-flow:row wrap;也可以同时规定子元素的排列方向和是否换行;
子元素的尺寸确定之后,用此属性来设置flex-direction定义方向上的分布方式(同样是在父元素上设置):
规定子元素在指定排列方向上的分布方式:分别代表 左浮动效果、右浮动效果、居中、贴边间距相等、不贴边间距相等;
justify-content: flex-start | flex-end | center | space-between | space-around;
额外说一下justify-content:space-around;代表第一个子元素靠左的间距和最后一个子元素靠右的间距是中间子元素间距的一半,中间的元素等分间距。也就是每个子元素两边的margin是一样的;
以下是在子元素上设置的:
子元素的尺寸确定之后,用此属性来设置在父元素上flex-direction(定义方向)上的(垂直)方向的分布方式:
align-items:flex-start | flex-end | center | baseline | stretch;
以上分别代表在定义排列方向的垂直方向:顶部对齐、底部对齐、居中对齐、子元素内文字底部对齐、子元素高度拉伸和父元素一样高;
设置多行子元素在行方向上的对齐方式:
align-content : flex-start | flex-end | center | space-between | space-around | stretch;
分别代表:多行整体靠上排列、 多行整体靠下排列、多行整体居中排列、第一行子元素靠上顶格,最后一行子元素靠下顶格,中间行子元素等分垂直的间距、同理、同理;
条目属性:(也是在子元素上设置)
flex-grow:number;表示当父元素又多余的空间时,这些空间在不同子元素质检的分配比例
flex-shrink:number;当父元素的空间不足时,各个子元素的尺寸缩小的比例
align-self:auto | flex-start | flex-end |center|baseline|stretch;覆写父元素指定的对齐方式。
看各个样式的效果图,请看这个连接:链接
最新文章
- [ASP.NET MVC 小牛之路]18 - Web API
- IOS - Create Push Segue Animation Without UINavigationController
- 使用spawn-fcgi管理php-cgi
- UIButton的常见设置
- rsync 目录 斜杠
- javaScript的select元素和option的相关操作
- 【Android】项目中每个文件夹的作用
- uva 147 Dollars(完全背包)
- 论docker中 CMD 与 ENTRYPOINT 的区别(转)
- Mysql5.7在CentOs环境下定时备份数据库
- 特殊权限SUIG、SGID、SBIT
- C#枚举数值与名称的转换实例分享
- JAVA-MyBaits对应XML的两种使用方式
- [Swift]LeetCode9. 回文数 | Palindrome Number
- 使用EF+ASP.NET MVC+Bootstrap开发一个功能强大的问卷调查系统
- Tensorflow object detection API 搭建物体识别模型(二)
- PAT甲题题解-1129. Recommendation System (25)-排序
- Linux LVM 简单操作
- 如何使用 Java 删除 ArrayList 中的重复元素
- [Winform]setupfactory打包时添加开机自启动的脚本