flex布局(弹性盒模型)知识点
来源:互联网 发布:算法导论pdf 编辑:程序博客网 时间:2024/06/05 23:52
flex布局
基本概念
- Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
- 老版本我们通常称为box;
- 新版本我们成为flex;
- Webkit 内核的浏览器,必须加上-webkit前缀。
//老版本 display: -webkit-box;//新版本display:flex;
- 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
- 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
- 主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;
- 交叉轴的开始位置叫做cross start,结束位置叫做cross end。
- 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
flex属性
容器上的属性
老版本容器属性
容器的布局方向: -wibkit-box-orient属性改变主轴哪一根;
- horizontal 指定子元素在一个水平线上从左至右排列;
- vertical 从顶部向底部垂直布置子元素;
- (略)inline-axis 子元素沿着内联坐标轴(映射到横向);
- (略)block-axis 子元素沿着块坐标轴(映射到垂直);
- (略)inherit box-orient 属性的值应该从父元素继承 ;
容器的排列方向: -wibkit-box-direction改变了主轴的方向;
- normal 以默认方向显示子元素。
- reverse 以反方向显示子元素。
- inherit 应该从子元素继承 box-direction 属性的值;
富裕空间的管理
- box-pack
- start 对于普通方向的boxes,左边缘的第一个子元素被放置在左侧(所有额外的空间放置后的最后一个子元素)。对于反向boxes,右边缘最后一个子元素放置在右侧(所有额外的空间放置前的第一个子元素);
- end 对于正常的方向的boxes,最后一个子元素的右边缘放置在右侧(所有额外的空间放置前的第一个子元素)。对于反向boxes,第一个孩子的左边缘放置在左侧(所有额外的空间放置后的最后一个子元素);
- center 额外的空间划分均匀的两半,前一半放置第一个子元素,另一半放置最后一个子元素;
- justify 额外的空间平均分配给每个子元素
- box-align
- start 对于正常方向的boxes,每个子元素的顶部边缘放在沿box的顶部。反向箱,每个子元素的底边放在沿box的底部;
- end 对于正常方向的boxes,每个子元素的顶部边缘放在沿box的底部。反向箱,每个子元素的底边放在沿box的顶部;
- center 任何多余的空间被划分均匀,一半以上的子元素放在上面,剩下的子元素放在另一半;
- baseline 如果box-orient是内嵌单轴或横向,所有的子元素都置于他们的基线对齐;
- stretch 子元素拉伸以填充包含区块;
- box-pack
新版本容器属性
- 容器的布局方向:flex-direction属性改变主轴哪一根,属性决定主轴的方向(即项目的排列方向)
容器的排列方向:
- 所谓的排列方向其实就是主轴上flex-direction属性的四个属性值的控制;
- row(默认):主轴为水平方向,起点在左方;
- row-reverse:主轴为水平方向,起点在右端;
- column:主轴为垂直方向,起点在上沿;
- columen-reverse:主轴为垂直方向,起点在下沿。
- 所谓的排列方向其实就是主轴上flex-direction属性的四个属性值的控制;
富裕空间的管理:
justify-content:定义了项目在主轴上的对齐方式。
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items:定义项目在交叉轴上如何对齐。
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
新版本新增容器属性
- flex-wrap如果一条轴线排不下,如何换行。
- nowrap(默认):不换行。
- wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方。
- align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
- flex-wrap如果一条轴线排不下,如何换行。
容器属性的技术点
- flex技术点
- 容器上的属性
- 容器的布局方向:
- old:box-orient;
- new:flex-direction
- 容器的排列方向:
- old:box-direction;
- new:flex-direction;
- 富裕空间的管理
- old:
- box-pack
- box-align
- new:(更强大的富裕空间管理)
- justify-content
- align-items
- old:
- 容器的布局方向:
- 容器上的属性
- 注意点
- 点一:
- 容器的布局方向控制了主轴是哪一根;
- 容器的排列方向控制了主轴的方向;
- 点二:
- 新版本对主轴的控制是通过flex-direction一个属性的四个属性值来实现的;
- 老版本对主轴的控制是通过box-orient,box-direction两个属性的四个属性值来实现的;
- 点三:
- 新版本中的flex-direction会对赋予空间产生影响;
- 老版本中box-direction不会对富裕空间产生影响;
- 点一:
项目上的属性
- 注意:弹性空间的管理,会把富裕空间按比例分配到项目上;
老版本项目属性
- webkit-box-flex;指定box的子元素是否灵活或固定的大小,默认值为0;
新版本项目属性
- order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0;
- align-self属性允许单个项目与其他项目不一样的对齐方式,可覆盖align-items属性;默认auto;
- flex-grow(拉伸因子) 用于设置或检索弹性盒的扩展比率;
- flex-grow计算公式:
- 富裕空间 = (容器大小 - 所有相邻项目flex-basis的总和)
- 可扩展空间 = (可用空间/所有相邻项目flex-grow的总和)
- 每项伸缩大小 = (伸缩基准值 + (可扩展空间 x flex-grow值))
- flex-grow计算公式:
flex-shrink属性定义项目的缩小比例,默认为1;
- flex-shrink: 每项flex收缩大小 = 伸展基准值 - (收缩比例 / 收缩比例总和 x 溢出的空间)–>并不是
- 正确的计算方法:
- 1.计算收缩因子与基准值乘的总和;
- 2.计算收缩因数: 收缩因数=(项目的收缩因子*项目基准值)/第一步计算总和
- 3.移除空间的计算:移除空间= 项目收缩因数 x 负溢出的空间
//比如:一个容器wrap中的五个项目。<div class="item">1</div><div class="item">22</div><div class="item">3</div><div class="item">4</div><div class="item">5</div>//样式如下//五个项目的收缩因子和基准值50px都是默认值,#wrap .item{ width: 50px; height: 50px; background: pink; text-align: center; line-height: 50px;}//第一个项目和第二个项目更改了收缩因子和项目基准值#wrap .item:nth-child(1){ flex-basis: 100px; flex-shrink: 2;}#wrap .item:nth-child(2){ flex-shrink: 5;}//计算方式:1.计算收缩因子与基准值乘的总和:2*100 + 5*50 + 3*50 =6002.计算收缩因数:收缩因数=(项目的收缩因子*项目基准值)/第一步计算总和 第一项收缩因数:2*100/600 = 0.33333 第二项搜索因数:5*50/600 = 25/60 其余项收缩因数:50/600= 5/603.移除空间的计算:移除空间= 项目收缩因数 x 负溢出的空间 第一项所需的移除空间:1/3 * 100 = 33.33 第二项所需的移除空间:25/60*100 = 41.67 其余项所需的移除空间:5/60 *100 = 8.333
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间,默认为auto;
- flex
- flex-grow, flex-shrink 和 flex-basis的简写
- 属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
- 快捷键:1;代表的值是1,1,0;
阅读全文
1 0
- flex布局(弹性盒模型)知识点
- 弹性盒模型 Flex 布局
- CSS中flex布局 弹性盒模型
- 响应式布局:CSS3弹性盒flex布局模型
- 响应式布局:CSS3弹性盒flex布局模型
- 响应式布局:CSS3弹性盒flex布局模型
- 浅谈CSS属性之布局--flex布局<弹性盒模型>
- flex弹性盒布局
- Flex弹性盒布局
- Flex弹性盒模型
- Flex弹性盒模型
- Flex弹性盒模型
- flex布局(弹性布局)
- flex布局(弹性布局)
- css3中 弹性盒模型布局之box-flex
- flex弹性盒布局(layout)
- box flex 弹性盒模型(转载)
- CSS3--弹性盒模型(display:flex)
- HTTP协议简介
- 事件基础二
- SDUT-数据结构实验之查找七:线性之哈希表
- 六、生命的职责
- Android手机与PC端进行通信
- flex布局(弹性盒模型)知识点
- 多线程概念
- CentOS配置smtp发邮件
- pycharm常用设置(keymap设置及eclipse常用快捷键总结)
- pandas 终极版1:创建和查看DataFrame数据 mysql读取数据
- Qt TableView的简单使用
- npm项目运行找不到相关依赖
- NumPy库入门
- 使用Ps制作真正背景透明png