简介

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

flex子项

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)

1 .flex-basci对width的操作就是覆盖。如果同时设置了这俩值。width直接不生效
2 .自身尺寸只要和下面这几个方面有关。box-sizing盒模型，width.min-width,max-width.content内容

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

计算优先级

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

一个flex其实是这三个属性的集合，以后还是都分开写吧

flex只有一个值

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

1 .实际表现，没有宽度，所以所有的元素都将挤在一个里面，就算是设置了换行也不知道，蠢的一批

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

1 .这样的表现就是如果一行可以放5个，总共有7个，那么第一行是5个，长度是100px.第二行的的3个长度就是160px;

其他

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

flex-basis

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

image.png

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

flex-grow

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

flex-shrink

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

结果

.container{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-around;

            width: 500px;
            height: 500px;
        }
        .d1{
            flex-basis:100px;
            flex-grow: 0;
            /* 不会去争夺多余的财产 */
            flex-shrink: 2;
            /* 不够的时候需要拿的时候，拿的数量是被人的两倍 */
            /* 这也就是说最大宽度是100px,最小宽度还不确定 */
        }

        .d2,.d3{
            flex-basis: 100px;
            flex-grow: 0;
            flex-shrink: 1;
        }
        .d4{
            flex-basis: 50px;
            flex-grow: 3;
            /* 多余的时候要拿3份，不足的时候不给 */
            /* 这也就是最小宽度是20px */
            flex-shrink: 0;
        }

        .d5{
            flex-basis:50px;
            flex-grow: 2;
            flex-shrink: 0;
        }

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

.container div{
            flex-basis:100px;
            background-color: aquamarine;
        }

//但是如果每一个item加了min-width之后，总宽度不够会超出显示的，这种如果不想，需要加overflow:hidden

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

.content div:nth-child(5n){
//这样可以选到每一排第5个，但是这样必须是一排是5个才可以，不然就需要动态换，所以最后还是加父元素的padding吧，补足那不够的一半.是一个元素和最后一个元素没有兄弟元素的这些
        }

截屏2022-02-20 下午11.13.32.png

父元素属性

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

image.png

从左到右非别是

1 .column-reverse:竖向从下到上
2 .column:竖向从上到下
3 .row：横向从左到右。注意这个是默认值
4 .row-reverse:横向从右到左。

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

image.png

1 .nowrap:不换行，默认值
2 .wrap:换行，顶满的那一行在上面
3 .wrap-reverse：订满的那一行在下面。这个应该没人用吧，看着就就很毕加索

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

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

image.png

1 .flex-start:左对齐。默认值。其实如果都是左对齐，我们可以用margin来模拟项目的间距的
2 .flex-end：右对齐
3 .center:居中
4 .space-around:两边的距离是中间距离的一半。只有中间的是平均分布的
5 .space-between:左右两侧贴边，其余均匀分布
6 .space-evenly:所有的间隔都是相等的。如图.有兼容性问题

image.png

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

image.png
截屏2022-02-21 下午11.34.15.png

1 .flex-start：交叉轴的起点对齐。
2 .flex-end:交叉轴的终点对齐
3 .center:交叉轴的终点对齐
4 .baseline:项目的第一行文字的基线对齐
5 .stretch:默认值。如果项目未设置高度或者为auto，会自动占满整个容器的高度

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

image.png

1 .flex-start：多条轴和交叉轴的起点对齐
2 .flex-end:与交叉轴的终点对齐
3 .center:与交叉轴的中点对齐
4 .space-between:与交叉轴两端对齐，轴线之间的间隔平均分布
5 .space-around:每个轴线两侧的间隔都相等。轴线之间的间隔

项目的属性

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

2 .flex-grow

3 .flex-shrink

4 .flex-basis

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

1 .flex-start
2 .flex-end
3 .center
4 .baseline
5 .stretch