flex简单记录

[jerryni]

容器属性

display: flex; // 变成容器

justify-content: 水平对齐方式
align-items: 垂直对齐方式
flex-direction：坐标方向；4个值，row | row-reverse | column | column-reverse
flex-wrap：nowarp默认一行 wrap多行，reverse方向相反

不常见：
flex-flow: 是direction和wrap的简写
align-content：配合flex-wrap多行形式使用

子元素属性

flex-grow: 默认值是0；可以理解成占用额外空间的比例
flex-shrink: 默认1；flex元素默认宽度大于容器宽度时生效，值越大缩得越厉害;
flex-basis：在空白分配前的默认尺寸，初始大小；

• 默认auto，根据元素的width height属性来定，会受到box-sizing的影响；
• 对额外空白的处理：
  • auto会根据flex-glow来分配额外的空间；
  • 设置成0，额外空间就不被考虑了。如下图：
    

flex缩写[grow, shrink, basis]：
默认值是： initial => 0 1 auto;
flex: auto => flex: 1 1 auto;
flex: <positive-number> => flex: <positive-number> 1 0px；
flex: <positive-number> <basis> => <positive-number> <positive-number> <basis>

order：可以控制显示顺序

align-self：垂直对齐方向

常用布局

左边填满 右边定宽

左边：flex: 1;
右侧：width: 100px;

参考资料

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.zhangxinxu.com/wordpress/2019/12/css-flex-basis/

[jerryni]

常见问题：容器和子元素都有哪些属性，默认值是什么