Day20

2023.2.14

弹性盒子：可以对一个容器中的子元素进行排列、对齐、分配空白区间

弹性盒display：flex；将元素作为弹性伸缩盒显示

display：inline-flex；将元素作为内联块级弹性盒显示

将容器设置为弹性盒之后，子元素中的float、clear、vertical-align（垂直对齐）属性都会失效

弹性子元素--类似于行内块元素，如果不设置宽高，由内容撑开；即使是行内元素也可以设置宽高

弹性盒子基本概念

有两条轴：

默认的主轴方向---x轴的方向，水平向右（左侧边为主轴的起始点，右侧边为主轴的终点）

默认的交叉轴（侧轴）方向---y轴的方向，水平向下（上方为侧轴起点，下方为侧轴的终点）

弹性盒子主轴方向：

主轴的方向---子元素的排列方向

flex-direction：row；默认值，水平向右，起点在左端

flex-direction：row-reverse；水平向左，起点在右端

flex-direction：column；垂直方向--从上往下，起点在上方

flex-direction：column-reverse；垂直方向--从下往上，起点在下方

弹性盒子的主轴对齐方式

设置主轴的对齐方式，弹性子元素在主轴方向的对齐方式

justify-content：flex-start；默认值，主轴在顶端对齐

justify-content：flex-end；主轴在末端对齐

justify-content：center；居中对齐，子元素位于弹性容器的中心

justify-content：space-between；两端对齐，子元素和子元素之间有空白，项目之间的间距相等

justify-content：space-around；四周对齐，子元素之前、之间、之后都有空白，并且空白自行分配，项目和项目之间的间隔要比项目和边框之间的间距大一倍

justify-content：space-evenly；平均分配，项目与项目之间，项目与边框之间，间距都相等

弹性盒子侧轴的对齐方式

弹性子元素在侧轴上的对齐方式

align-items： flex-start；（默认值），子元素在侧轴的顶端对齐

align-items：flex-end；子元素在侧轴的末端对齐

align-items：center；子元素在侧轴的中间对齐

align-items：baseline；子元素在第一行文字的基线对齐

align-items：stretch；（默认值）如果弹性子元素没有高度或者高度为auto，将占满整个容器的高度

弹性盒子的换行属性

弹性盒子的子元素的换行方式

flex-wrap：nowrap；默认值 不换行

flex-wrap：wrap；换行，第一行在上方显示

flex-wrap：wrap-reverse；换行，第一行在下方显示（翻转）

弹性盒子的换行属性、控制之间的间距

折行、控制行与行之间的距离

align-content：flex-start；默认值，顶端没有间距

align-content：flex-end；末端对齐，没有间距

align-content：center；居中对齐，没有行间距

align-content：space-between；两端对齐，中间距离自行分配

align-content：space-around；四周对齐

align-content：space-evenly；平均分配

注意：弹性盒项目为多行时才有效；必须要有折行属性

弹性子元素自身在侧轴的对齐方式

调整自身在侧轴的对齐方式

Align-self：flex-start；在侧轴的起点对齐

Align-self：flex-end；在侧轴的终点对齐

Align-self：center；在侧轴的中间对齐

Align-self：stretch；如果弹性子元素没有高度或者高度为auto，将会占满整个容器

order属性order:1;

改变子元素的排列顺序

取值：数值，没有单位，默认数值为0，数值越小 越靠前

可以为负值，不能为小数，必须为整数

flex-grow属性

Flex属性：指定弹性子元素如何分别剩余的空白区间

Flex-grow：子元素的放大比例（子元素的宽度之和<父盒子的宽度）

取值：数值，没有单位，默认值0（表示不放大）

负值无效，可以为小数

Flex-shrink属性：子元素的缩小比例（子元素宽度之和>父盒子的宽度）

Flex-shrink：1；默认值，表示空间不足时，等比例缩小

Flex-shrink：0；表示空间不足时，不缩小

Flex-shrink：1.5；可以为小数

负值对该属性无效

Flex-shrink计算

缩小的宽=（当前元素的宽*shrink值）/（元素1*元素1的shrink值+元素2*元素2的shrink值...）*溢出的空间宽度（子元素宽度之和-父盒子宽度）

Flex-basis属性

定义弹性盒子元素的基准值（参与计算的最终值---1、基于它计算了容器的剩余空间 2、基于它计算增长以后的最终值）

简写：flex：0 1 auto；g s b

flex-flow复合写法

flex-flow：row-reverse wrap；

calc（）函数

用于动态计算长度值，支持的运算符+ - * /，在运算符的前后都需要保留一个空格