flex布局:
他的布局主要有两个“二”,一个二:容器项,子项目项。
另一个:有两条轴,主轴,副轴。
它的使用时,必须先声明说明是flex布局:display:flex;
针对于容器项的属性6个:
1、flex-direction:row/row-reverse/column/column-reverse;
它申明了利用弹性盒布局的主轴方向,行和列,或者逆秩。申明了它接下来的布局都是在他的方向上布局。
2、flex-wrap:nowrap/wrap/wrap-reverse;
它申明了容器下的子元素是否允许换行。
3、flex-flow:row wrap;
前两种的合体,说明什么方向,是否换行。
4、just-content:(有5个属性值)flex-start/flex-end/center/space-between/space-around
说明容器下的子项对齐方式。
flex-start:从开始的方向对齐。
flex-end:从结束的地方开始对齐。
center: 居中对齐。
space-between:两端对齐。
space-around:四周对齐,子项目在主轴的两侧会均匀分布剩余空间,注意中间的回事两倍的距离。
5、align-item:(有5个属性)flex-start/center/flex-end/stretch/baseline
定义子项目在交叉轴上对其的方式。交叉点:主轴与边框的交叉的位置。
stretch:(默认值)如果项目未设高度或者是auto,则项目会自动占满整个容器的高度。
baseline:项目的第一行文字线对齐。
6、align-content:(6个属性)flex-start/flex-end/center/stretch/space-around/space-between
定义了多条轴线的对齐方式,如果有一行轴线该属性不起做用。
stretch:在交叉轴上或铺满整个容器。
正对于子项目的6个属性:
order/flex-grow/flex-shrink/flex-basis/flex/align-self
1、order:
order: <integer>;
定义排列的顺序,数值越小,排列越靠前,默认为0;
2、flex-grow:
flex-grow: <number>; /* default 0 */
定义项目放大,默认为0,如果存在剩余空间才会放大,如果没有剩余空间则不会放大。
3、flex-shrink:
flex-shrink: <number>; /* default 1 */
定义项目缩小,默认为1,如果该空间不够则会缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
4、flex-basis:
flex-basis: <length> | auto; /* default auto */
定义分配多余空间之前,项目占据主轴的空间。浏览器根据此属性计算主轴是否有多余空间,默认为auto;及项目本身的大小。它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
5、flex:
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
是flex-grow/flex-shrink/flex-basis的简写,三个可以合成。
6、align-self:
align-self: auto | flex-start | flex-end | center | baseline | stretch;
允许该单个项目与其他项目有不一样的对齐方式,如果对子项目设置此属性则会覆盖掉容器align-item设置的对齐方式。默认为auto,继承父元素的对齐方式。
兼容性参考http://www.cnblogs.com/yangjie-space/p/4856109.html
最新文章
- grouping sets从属子句的运用
- 【Win10应用开发】通过拖放来打开文件
- geotrellis使用(三)geotrellis数据处理过程分析
- WIN32服务程序(二):卸载服务
- Switch能否用string做参数?
- javascript中关于深复制与浅复制的问题
- Failed to issue method call: Unit httpd.service failed to load: No such file or directory.
- hdu2825Wireless Password(ac+dp)
- MVC的异步,Entity Framework的异步,ADO.NET的异步,
- Mysql去除重复
- 教程-MessageBox 使用方法
- INSTEAD OF触发器
- Windows、Office系列产品精华部分集锦
- MyEclipse简介
- 设计模式 -->; (5)适配器模式
- 【一天一道LeetCode】#29. Divide Two Integers
- Python爬虫基础之lxml
- gflags_static.lib 无法解析的外部符号 __imp__PathMatchSpec
- Hibernate运行原生sql并将查询的结果转化为对象
- css3+html5特效-向上滑动
热门文章
- 数据格式转换 (三)Office文档转HTML
- 关于WMware Workstation出现 “”该虚拟机似乎正在使用中“”解决办法
- JUnit中assertEquals和assertSame方法的不同
- Linux桌面词典 星际译王(StarDict)
- Linux 如何重新划分Swap交换分区
- tensorflow学习之路-----卷积神经网络个人总结
- Object-C初体验
- 这是一套Java菜鸟到大牛的学习路线之高级教程,由工作了10年的资深Java架构师整理。
- js正則表達式--验证表单
- spark资料下载