Flex弹性盒布局2

Flex弹性盒布局2

项目的属性

order 定义项目的排列顺序，数值越小排列越靠前，默认为0

定义项目的排列顺序。数值越小，排C:\Users\12435\Desktop\6.13课堂\flex.html列越靠前，默认为0

order: <1>;推荐为 0 或者 非负整数, 设置了 order 属性，会按照 order 属性的值大小排列

flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大(主要作用是：分配剩余空间的)

flex-grow: <number>; 不能为负数，虽然可以设置为正小数值，一般不这么用

平均分配的含义是，去掉内容之后的空间进行均分，如果本身内容就多，虽然均分，但还是占比较大的空间

flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小(主要作用是做缩小空间用的)

flex-shrink: <number>;负值对该属性无效,值越大按比例越缩小

flex-basis 定义在分配多余空间之前，项目占据的主轴空间

在flex-grow  和flex-shinrk属性起作用以前，定义每一个flex项目的默认大小，它的默认值为auto，即项目的本来大小

flex-basis: auto || <length>; length: 我们平常用的一些属性值，如 px 、 % 、 rem 等, 优先级比 width 要大,他的宽度是包括border和padding的值,类似于怪异盒模型.

flex 是复合属性，代表flex-grow, flex-shrink 和 flex-basis的简写

align-self 定义交叉轴上的对齐方式

两个快捷值

flex：auto代表 (1 1 auto)

flex：none代表 (0 0 auto)

align-self交叉轴上的对齐方式，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

默认值为auto，表示继承父元素的align-items属性

可能取6个值，除了auto，其他都与align-items属性完全一致

align-self: auto | flex-start | flex-end | center | baseline | stretch;

小知识:

calc:如果我们还是100%视图,但是又不想它正好100%那怎么办 给我们的宽度加上calc,加就是超过100%视图多出100的滚动条,减就会少100的距离,注意点是我们要在+或-的左右必须加上空格.不支持IE8以下浏览器.

var() 修改色值,他需要与:root元素配合使用,使用方法如图,好处是我们可以统一配比颜色.但是该属性只能在高配置浏览器可以使用,IE11以下浏览器不支持.

iframe标签可以嵌套一个html页面,frameborder边框,一般设置为0.