css3-flex-two
来源:互联网 发布:哪个软件可以看腐剧 编辑:程序博客网 时间:2024/05/21 04:25
老版本flex介绍(伸缩布局盒实例1.html)
F:--------------------
伸缩容器设置display
display : box | inline-box
box: 块伸缩容器
inline-box: 内联级伸缩容器
=伸缩容器会为其内容创建新的伸缩格式化上下文(Flex formatting context)
=浮动不影响伸缩容器,伸缩容器的margin与内容的margin不重叠
=浮动元素 / 绝对定元素设置了内联伸缩容器,元素将会以块伸缩容器展示
G:--------------------
伸缩流方向box-orient
box-orient: horizontal | vertical | inline-axis | block-axis
=适用于伸缩容器。
=确定伸缩项目在伸缩容器中的流动布局方向。
horizontal : 伸缩项目在伸缩容器中从左到右在一条水平线上排列显示
vertical: 伸缩项目从上到下在一条垂直线上排列
inline-axis: 沿着内联轴排列显示
block-axis: 沿着块轴排列显示
=伸缩流方向与书写流方向有关系
H:----------
布局顺序box-direction
=伸缩项目在伸缩容器中的流动顺序。
box-direction: normal | reverse
noemal: 正常显示顺序。box-orient的值为 horizontal / inline-axis时候,从主轴开始按照文档流结构顺序,左到右
reverse: 反向显示。 eg: box-orient值为horizontal/inline-axis时候,从主轴终点按文档流结构反方向排列
!~!显示顺序和文本流顺序:
当书写模式为 rtl,box-direction:normal, box-orient: horizontal时候,从右向左
I:----------
伸缩换行box-lines
=控制伸缩项目是否溢出伸缩容器
=设置单行多行显示+决定侧轴方向
box-lines: single | multiple
single: 一行/一列显示
multiple: 多行/多列显示
J:----------
主轴对齐box-pack
=在主轴方向上对伸缩容器的额外空间进行管理
box-pack: start | end | center | justify
start: 向一行的起始位置靠齐
center: 向一行的中间位置靠齐
justify:平均分布在一行中
end: 向结束位置靠齐
侧轴对齐box-align
=在侧轴方向上对伸缩容器的额外空间进行管理
box-pack: start | end | center | justify
start: 伸缩项目顶部边缘放置在伸缩容器的顶端,额外空间放置在伸缩项目底端
center: 项目紧靠在一起,垂直居中与伸缩容器,平均分配在伸缩项目顶部和底部
end: 与start相反
baseline: 伸缩项目根据他们的基线对齐。伸缩容器额外空间可前可后显示
基线:取决于box-direction属性的起始边缘和末尾边缘
stretch: 伸缩项目填充整个伸缩容器
k:---------------------
伸缩性box-flex
=控制伸缩项目在伸缩容器中的显示空间(宽度 + 高度)
=伸缩项目宽度==伸缩容器宽度: 运用在伸缩项目中的宽度是每个伸缩项目的其次宽度
> : 根据比例制进行收缩
< : 根据比例制进行扩展
box-flex: <number>
---当容器中包含了多个定义box-flex属性的伸缩项目时候,浏览器会将这些伸缩项目的box-flex值相加。根据值占总值的
比例来分配伸缩容器额外的空间给项目。
L:--------------------
显示顺序: box-ordinal-group(自适应三列等高布局旧版flex.html)
=修改伸缩项目在页面中的显示顺序/ 实线排序组
box-ordinal-group: <integer> : 默认为1,正整数,设置位置顺序序列号(越大越后面
混合版本flex介绍(伸缩布局盒实例2.html)
A:--------------------主要用于IE10
display: flexbox | inline-flexbox
flexbox : 块级伸缩容器
inline-flexbox: 内联级伸缩容器
B:---------------------
伸缩流方向: flex-direction
-ms-flex-direction: row | row-reverse | column | column-reverse
row: ltr排版方式下从左到右排列; rtl从右到左
row-reverse: 与row相反
column: 从上到下类似与row
column-reverse: 与column相反
C:---------------------
伸缩换行: flex-wrap
flex-wrap : nowrap | wrap | wrap-reverse
nowrap: 单行显示
wrap: 多行显示
wrap-reverse: 多行显示ltr从右到左。 rtl从左到右
D:-------------------
伸缩流方向 + 换行
flex-flow: <flex-direction> || <'flex-wrap'>
E:-------------------
主轴对齐:
flex-pack: start | end | center | justify | distribute
F:---------------------
侧轴对齐:
flex-align : start | end | center | baseline | stretch
G:----------
堆栈伸缩行:(多行有效)
flex-line-pack: 调整伸缩行在伸缩容侧轴里的对齐方式
flex-line-pack: start | end | center | justify | distribute | stretch
H:---------
伸缩性: 指定可以伸缩的部件: 扩展比率、收缩比率、伸缩基准值
flex: none | [<positive-flex> <negative-flex> <perferred-size>]
positive: 正弹性的正整数/0。 忽略为1
negative: 负弹性的正整数/0。 忽略为1.
perferred:伸缩项目的首选大小,可以为width或者height 的任何有效值。包括inherit。默认0px。auto首选为该项目的width和height
G:---------
显示顺序: flex-order
order: <integer> 默认为0(越大越排在后面)
新flex介绍(伸缩布局盒实例2.html)
A:-------------------
display: flex | inline-flex
B:--------------------
伸缩流方向:
flex-direction: row | row-reverse | column | column-reverse
row: ltr排版方式下从左到右排列; rtl从右到左
row-reverse: 与row相反
column: 从上到下类似与row
column-reverse: 与column相反
C:-------------------
伸缩换行:
flex-wrap: nowrap | wrap | wrap-reverse
nowrap: 单行显示
wrap: 多行显示
wrap-reverse: 多行显示ltr从右到左。 rtl从左到右
D:-------------------
伸缩流方向 + 换行
flex-flow: <'flex-direction'> || <'flex-wrap'>
flex-flow属性与 writing-mode 有直接关系。
---当使用writing-mode:vertical-rl 时候转向垂直布局(竖排), flex-flow:row将转向垂直排列伸缩项目
E:-------------------
主轴对齐:
justfy-content: flex-start | flex-end | center | space-between | space-around
flex-start: 起始位置靠齐
flex-end: 末端位置靠齐
center: 中间位置靠齐
space-between:平均的分布在行里,第一个在开始,最后一个在结尾 类似与旧版本的jusify
space-around:平均分布在行里,两端保留一半的空间 distribute
F:---------------------
侧轴对齐:
align-items和align-self
align-items: 伸缩项目行在侧轴的对齐方式
align-self: 伸缩项目自身在侧轴的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch
flex-start: 在侧轴起点边的外边距紧靠该行在侧轴起始边
flex-end: 侧轴终点边的外边距靠住该行的侧轴终点边
center : 侧轴上居中放置
baseline: 根据伸缩项目的基线对齐
stretch: 拉伸填充整个伸缩容器
G:----------
堆栈伸缩行:(多行有效)
align-content: 调整伸缩行在伸缩容器里面的对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch
H:---------
伸缩性: 指定可以伸缩的部件: 扩展比率、收缩比率、伸缩基准值
flex: none | [<'flex-grow'> <'flex-shrink'> <'flex-basic'>]
flex-grow: <number>默认为0
flex-shrink: <number> 默认为1,可 负值
flex-basis: <length> | auto(默认)
G:---------
显示顺序: order
order: <number>
0 0
- css3-flex-two
- css3 flex
- css3 flex
- 【css3】flex
- css3--flex
- css3-box-flex布局
- CSS3属性box-flex
- css3--display:flex;
- CSS3 弹性布局Flex
- 浅撸 css3 flex 布局
- css3中的flex布局
- CSS3 box-flex 属性
- CSS3 Flex计算逻辑
- CSS3 box-flex 属性
- css3-flex-ONE
- Css3的Flex属性
- css3 flex兼容性
- css3 flex 布局理解
- python模块win32com 实现数据库表结构自动生成word表格
- maven
- 启用apache,发现80端口被占用【已解决】
- 领域驱动设计系列(2)浅析VO、DTO、DO、PO的概念、区别和用处
- hdu 5253 连接的管道(最小生成树)
- css3-flex-two
- LeetCode | Decode Ways
- 用RxJava实现一个ImageLoader
- Qt绘制贝塞尔曲线例程
- 3.4 3.5
- Linux常用命令
- 【多线程】在显示屏上输出各种字符
- 彩票不重复随机数
- centos vnc 使用