CSS篇 《图解CSS3》笔记 Flex
Flexbox模型的三个规范:
1. 旧版本 2009年 display: box、inline-box
2. 混合版本 2011年 display: flexbox、inline-flexbox
3. 新版本 2012年 display: flex、inline-flex
当display属性为以上时,将为其后代创建FFC(Flex Formatting Context)。
旧版本属性如下:
1. box-orient 定义伸缩主轴的方向(与书写顺序有关:ltr、rtl)
horizontal | vertical | inline-axis (内联轴排列)| block-axis (块轴排列)
2. box-direction 定义伸缩项目在伸缩容器中的排列顺序
normal | reverse
3. box-lines 伸缩项目溢出时是否换行(主流浏览器不支持该属性)
single、multiple
4. box-pack 主轴方向上,额外空间的分配
start(默认:额外空间在最后)、end、center(额外空间仅处于两端)、justify(额外空间平均分布在所有缝隙之间,不包括首尾边缘)
5. box-align 侧轴方向上,额外空间的分配
start、end、center、baseline、stretch(拉伸填充侧轴)
6. box-flex 主轴方向上,额外空间如何在每个伸缩项目上分配;按比例均分额外空间(使用在伸缩项目上)
<number>
7. box-ordinal-group 伸缩项目在伸缩流中显示的顺序,(使用在伸缩项目上)
<number> 默认为1,值越大,位置越靠后;
混合版本属性如下(主要针对IE10,加前缀:-ms-):
1. flex-direction 伸缩项目在主轴的排列顺序
row、row-reverse、column、column-reverse
2. fllex-wrap 伸缩项目超出时的处理方式
nowrap(单行显示)、wrap(多行)、wrap-reverse(多行但反向排列)
3. flex-flow 顺序与是否换行的组合
flex-direction, flex-wrap
4. flex-pack 伸缩项目在主轴上对齐方式
start、end、center、justify、distribute(伸缩项目的两端也会保留空间)
5. flex-align 伸缩项目在侧轴上对齐方式
start、end、center、baseline、stretch
6. flex-line-pack 当伸缩项目较多,多行展现时;主轴上的每一行|列成为伸缩项目行,多列中的这些行在侧轴上的排列顺序
start(在侧轴上向左靠拢)、end、center、justify、distribute、stretch
7. flex (用于伸缩项目)类似于box-flex,伸缩项目的宽度、高度是否基于可用空间具有弹性
正弹性整数、负弹性整数、首选大小 | none;
8. flex-order (用于伸缩项目)伸缩项目在主轴的排列顺序
正整数,默认为0
新版本属性如下:
1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content 主轴对齐
flex-start、flex-end、center、space-between、space-around;
5. align-items、align-self 伸缩项目行在侧轴的对齐方式、伸缩项目自身在所在行的对齐方式
flex-start、flex-end、center、baseline、stretch
6. align-content 与align-items相似,不过只有在:伸缩项目存在于多行时才有效,即:flex-wrap为wrap;
7. flex (使用于伸缩项目)伸缩性
扩展比率、收缩比率、伸缩基准值
8. order (使用于伸缩项目)排列顺序
number
转载于:https://www.cnblogs.com/diydyq/p/4234630.html
CSS篇 《图解CSS3》笔记 Flex相关推荐
- HTML+CSS篇笔记
HTML篇 ctrl+F按照关键字查找需要的内容 网页的组成: 结构(HTML).样式(CSS).行为(js)HTML:超文本标记语言ECMA:管JSW3C:管HTML,CSSxhtml:扩展超文本标 ...
- animate.css –齐全的CSS3动画库--- 学习笔记
animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...
- 前端基础知识总结---CSS篇
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出! 目录 1.介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的? 2.CSS 选 ...
- 前端计划——面试题总结-CSS篇
前端面试之CSS篇 1.三种基本引入方式 外部样式表 <link rel="stylesheet" type="text/css" href=" ...
- 《图解CSS3:核心技术与案例实战》
<图解CSS3:核心技术与案例实战> 基本信息 作者: 大漠 丛书名: Web开发技术丛书 出版社:机械工业出版社 ISBN:9787111469209 上架时间:2014-7-2 出版日 ...
- java程序员 css_好程序员Web前端分享前端CSS篇
今天好程序员跟大家分享的文章是CSS篇.Web前端技术由html.css和javascript三大部分构成,而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很 ...
- css参考手册css3手册_CSS手册:面向开发人员CSS便捷指南
css参考手册css3手册 I wrote this article to help you quickly learn CSS and get familiar with the advanced ...
- 【干货分享】前端面试知识点锦集01(HTML+CSS篇)—— 附答案
1. 浏览器页面有哪三层构成,分别是什么,作用是什么? 参考答案 构成:结构层.表示层.行为层 分别是:HTML.CSS.JavaScript 作用:HTML实现页面结构,CSS完成页面的表现与风格, ...
- 前端面试题汇总CSS篇
转载自:https://www.cnblogs.com/zhangshuda/p/8465043.html 前端面试题 ----css篇 1.css盒模型有哪些及区别content-box borde ...
- 前端面试题之CSS篇
前端面试题之CSS篇 一.CSS基础 1. CSS选择器及其优先级 2. CSS中可继承与不可继承属性有哪些 3. display的属性值及其作用 4. display的block.inline和in ...
最新文章
- Python入门 io篇
- Gigabit Ethernet复制数据会异常的缓慢
- Python函数式编程简介(二)返回函数
- ] 求鉴定:《终于知道ramdisk 4g是如何使用4G以上内存了,慎用!》
- java object怎么拿字段_「Java面试秘籍」String不可变,如何理解
- VScode+远程服务器docker+C/C++ 代码挑战配置
- mvn package 报Failed to execute goal
- Bolt界面引擎中XLUE布局XML文件节点属性配置详解
- 基于arduino的避障.跟随小车(带有魔术手)
- java PDF添加水印效果
- wangeditor光标乱跑,回车换行又返回来问题
- python下将图片合成pdf
- 技术分享| RTC通讯中常用的音频格式
- 智能校对的技术原理和实践
- Xcelsius2008系统
- Baumer工业相机堡盟工业相机如何联合BGAPISDK和佳能EF变焦镜头实现相机的自动变焦(C++)
- 路由器开启IPv6的方法
- Ubuntu修改桌面分辨率
- 如何无线接收服务器封包,大大通|如何抓取802.11a/b/g/n/ac 的无线网络封包
- C语言调用so动态库的两种方式