flex布局

Posted 2023-03-09

参考技术A 1 .1维布局，一个flex一次只能处理一个维度上的元素布局，一行或者一列。
2 .如果不规定换行，就算是超了，会等比压缩缩小，而不是自动换行，想要换行必须要使用felx-wrap
3 .任何一个容器都可以被指定为flex布局
4 .行内元素可以被指定为inline-flex
5 .设置flex之后，子元素的float,clear，vertical-align

1 .在flex布局中，一个Flex子项的宽度是由元素自身尺寸即flex-basic设置的基础属性，以及外部填充flex-grow,收缩flex-shrink，还有最大，最小尺寸限制这5个共同决定的
2 .基础尺寸：flex-basic,box-sizing盒模型共同决定
3 .弹性增长;flex-grow属性，弹性收缩；flex-shirk属性
4 .最小尺寸min-wdith,max-width等css属性，min-content最小内容尺寸,width也属于最小尺寸了
5 .在flex布局中，子项设置width是没有直接效果的.实际设置的width，虽然看起来生效了，但是效果是flex-basic的作用
6 .flex-basic的默认值是auto，也就是完全根据子列表项自身尺寸渲染(min-width>||max-width>width>content-size)

7 .是盒模型，元素自身尺寸特性，以及flex属性共同作用的结果。

最大最小尺寸限制>弹性收缩，弹性扩张>基础尺寸
1 .所以无论是什么布局min-width,max-width这种属性都拥有绝对权威

1 .如果是数值，比如flex:1。chrome里面是flex-basis:0%,flex-grow:1,flex-shirk:1.

2 .如果是长度值，比如flex:100px。还是chrome，flex-basis:100px,flex-grow:1,flex-shirk:1。

1 .2个参数，3个参数，以及initial,auto,none这些关键字，没有记的必要，直接分开写的清清楚楚不就好了，非要用一些自己不是很明白的参数在那里瞎搞
2 .flex默认值 0 1 auto 。也就是不放大，等比缩小，用原来的大小

1 .分配固定的家产数量
2 .如果同时设置width，会被忽略，但是max-width，min-width，优先级比flex-basis更高。但是最高不要用这个值，也就是使用宽度直接使用flex-basis就可以，不需要单独给子项固定width，这样会让人很疑惑。甚至根本不需要min-width/max-width这些属性
3 .flex-basic是作用在content-box上的.设置的width+padding+border

。如果给他设置box-sizing:border-box:那么宽度会减小，减小的长度是padding-left+padding-right+border*2的长度
4 .flex-basis:支持一堆关键字，但是好多都不支持

1 .家产任然后赋予的时候在怎么分。默认是0.多余空间不分配

1 .家产剩余不够分的时候怎么分。默认是1，空间不足会分配

1 .每一个item固定大小100px。只有flex-basis：100，其余两属性没有，但是宽度不足，又没有换行的时候，宽度不够，所有都是会一起缩小的，并不是最小宽度，这是因为flex-shirk:默认是1.所以属性一定还是设置的

2 .每一个item最小宽度是100，多余宽度等扩大，但是要有间距.因为会等比扩大，所以间距要自己设置，这里可以设置padding。还有一个重要的就是background-color的计算和bos-sizing没有关系。所以这里加padding没啥用，背景颜色还是在原来的范围内显示，只是content-box会变化。所以这里要加margin,但是marginzhe这里也有一个坑点，flex布局下不会自动margin折叠，所以不能简单的margin：10，这样各个item的间距不一样

1 .flex-direction:决定主轴的方向

从左到右非别是

2 .flex-wrap:默认情况下，所有项目都是排在一条线上，就算是超了，默认情况下都是按照1:1缩小，而不是机灵的自动换行，必须使用这个属性才会自动换

3 .flex-flow:上面那俩属性的合并值。

4 .justify-content:主轴上项目的对齐方式。如果是横向主轴，那么是左右的对齐方式，如果是竖向主轴，那么就是上下的对齐方式

5 .align-items:交叉轴上的对齐方式，也就是上下对齐方式.具体的对齐方式和交叉轴有关系

6 .align-content属性：多跟轴线的对齐方式,如果项目只有一根轴线，这个属性
不起作用

1 .order：本来列表是按照实际的渲染顺序来显示的，如果单独给某个属性设置这个值，数字越小，排列越靠前。

2 .flex-grow

3 .flex-shrink

4 .flex-basis

5 align-self:重点。覆盖align-items属性，允许单个项目和其他有不一样的对齐方式.会覆盖align-items属性。