前端⾯试题归类-css的flex相关
Flex布局
常见⽗项的属性：
●flex-direction ：设置主轴的⽅向
Row 默认值从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
●justify-content ：设置主轴上的⼦元素排列⽅式
flex-start 默认值从头部开始如果主轴是x轴，则从左到右
flex-end 从尾部开始排列（但元素的顺序还是从左到右）
center 在主轴居中对齐(如果主轴是x轴则⽔平居中)
space- around 平分剩余空间
space – between 先两边贴边再平分剩余空间(重要)
●flex-wrap ：设置⼦元素是否换⾏
默认情况下，项⽬都排在⼀条线(⼜称”轴线”) 上。flex-wrap属性定义 , flex布局中默认是不换⾏的。
nowrap 默认值，不换⾏
wrap 换⾏
●align-content ：设置侧轴上的⼦元素的排列⽅式(多⾏)
设置⼦项在侧轴.上的排列⽅式并且只能⽤于⼦项出现换⾏的情况(多⾏) , 在单⾏下是没有效果的。
flex-start 默认值在侧轴的头部开始排列
flex- end 在侧轴的尾部开始排列
center 在侧轴中间显⽰
space-around ⼦项在侧轴平分剩余空间
space- between ⼦项在侧轴先分布在两头，再平分剩余空间
stretch 设置⼦项元素⾼度平分⽗元素⾼度
●align-items ：设置侧轴上的⼦元素排列⽅式(单⾏)
该属性是控制⼦项在侧轴(默认是y轴).上的排列⽅式在⼦项为单项(单⾏)的时候使⽤
flex-start 从上到下
flex- end 从下到上
center 挤在⼀起居中(垂直居中)
stretch 拉伸(默认值但是⼦盒⼦如果给⾼度就不会⽣效)
●flex-flow ：复合属性，相当于同时设置了flex-direction和flex-wrap
flex-dicection: column;
flex-wrap: wrap;
它俩的简写可以写成：css实现垂直水平居中
flex-flow: column wrap;
常见⼦项的属性：
●flex⼦项⽬占的份数
flex属性定义⼦项⽬分配剩余空间,⽤flex来表⽰占多少份数。
●align-self控制⼦项⾃⼰在侧轴的排列⽅式
align-self属性允许单个项⽬有与其他项⽬不-样的对齐⽅式，可覆盖align-items属性。
默认值为auto ，表⽰继承⽗元素的align-items属性，如果没有⽗元素，则等同于stretch。
span:nth-child(2){
/
*设置⾃⼰在侧轴的排列⽅式*/
align-self:flex-end;
}
●order属性定义⼦项的排列顺序(前后顺序)
数值越⼩，排列越靠前，默认为0。（这个是左右的形式）
注意：和z-index不-样。（index是叠罗汉的形式）
flex属性flex:1到底是什么？
flex属性是 flex-grow、flex-shrink、flex-basis三个属性的缩写。
推荐使⽤此简写属性，⽽不是单独写这三个属性。
flex-grow：定义项⽬的的放⼤⽐例；
默认为0，即使存在剩余空间，也不会放⼤；
所有项⽬的flex-grow为1：等分剩余空间（⾃动放⼤占位）；
flex-grow为n的项⽬，占据的空间（放⼤的⽐例）是flex-grow为1的n倍。
flex-shrink：定义项⽬的缩⼩⽐例；
默认为1，即如果空间不⾜，该项⽬将缩⼩；
所有项⽬的flex-shrink为1：当空间不⾜时，缩⼩的⽐例相同；
flex-shrink为0：空间不⾜时，该项⽬不会缩⼩；
flex-shrink为n的项⽬，空间不⾜时缩⼩的⽐例是flex-shrink为1的n倍。
flex-basis：定义在分配多余空间之前，项⽬占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间，默认值为auto，即项⽬原本⼤⼩；
设置后项⽬将占据固定空间。
所以flex属性的默认值为：0 1 auto （不放⼤会缩⼩）
flex为none：0 0 auto  （不放⼤也不缩⼩）
flex为auto：1 1 auto  （放⼤且缩⼩）
flex为⼀个⾮负数字n：该数字为flex-grow的值，
flex：n ；= flex-grow：n；
flex-shrink：1；
flex-basis：0%;
flex为两个⾮负数字n1，n2：分别为flex-grow和flex-shrink的值，
flex：n1 n2；= flex-grow：n1；
flex-shrink：n2；
flex-basis：0%;
flex为⼀个长度或百分⽐L：视为flex-basis的值，
flex：L；= flex-grow：1；
flex-shrink：1；
flex-basis：L;
flex为⼀个⾮负数字n和⼀个长度或百分⽐L：分别为flex-grow和flex-basis的值，
flex：n L；= flex-grow：n；
flex-shrink：1；
flex-basis：L;
可以发现，flex-grow和flex-shrink在flex属性中不规定值则为1，flex-basis为0%。
flex：1即为flex-grow：1，经常⽤作⾃适应布局，将⽗容器的display：flex，侧边栏⼤⼩固定后，将内容区flex：1，内容区则会⾃动放⼤占满剩余空间。