flex笔记 表格文字版

flex弹性布局

其中开启了flex的元素叫flex-container
flex-container里面的直接子元素叫做flex items

1. flex-container

属性	说明	值
flex-direction	决定主轴方向	row(默认值)：主轴从左到右 row-reverse：主轴从右到左 column：主轴从上到下 column-reverse：主轴从下到上
flex-wrap	换行	nowrap(默认)：内容不换行 wrap：换行
flex-flow	上面两种的缩写	flex-direction || flex-wrap
justify-content	决定flex item水平对齐方式	flex-sart(默认值)：与main start对齐 flex-end：与main end对齐 center：整体居中 space-between：左右两端对齐 space-evenly：所有间距相等 space-around：左右间距是中间间距的一半
align-content	多行垂直对齐方式	同上(除space-evently)
align-items	垂直的对齐方式	normal(默认)：在弹性布局中，效果与stretch一样 stretch：当flex items在垂直方向的size为auto时，会自动拉伸至填充flex container flex-start：与cross start对齐 flex-end：与cross end对齐 center baseline：与基准线对齐(第一行文本底端)

其中space-evently存在兼容性的问题，解决方法给flex-container容器添加伪元素使用space-between来实现，下面放上代码

.container {
      display: flex;
      justify-content: space-between;
    }
    
.container::before,
.container::after {
      content: '';
      display: block;
    }

2. flex items

属性	说明	值
order	决定item的排布顺序	可以设置任意整数，值越小越排在后面，默认0
flex-grow	决定flex items如何扩展	1. 可以设置任意非负数字，默认0 2. 当flex container在水平方向上有剩余size时，flex-grow属性才会有效 3. 总和大于1按比例分全部，总和小于1按比例分剩下，不会分完
flex-shrink	决定flex items如何收缩	可以设置任意非负数字，默认1
flex-basis	设置flex items在主轴方向上的base size	1. auto(默认)、具体宽度数值(100px) 2. 决定flex items最终base size的因素，从优先级高到底（max-width flex-basis width 内容本身的size）
align-self	覆盖flex container设置的align-items	1. auto(默认值)：遵循flex container的align-items设置 2. stretch、flex-start、flex-end、center、baseline
flex	flex-grow || flex-shrink || flex-basis	1. 一个无单位数： 会被当做flex-grow 2. 一个有效的宽度： 会被当做flex-basis 3. 关键字none,auto或initial