自己个人网站后台怎么做/微信指数官网

容器属性：

flex-direction 主轴方向
flex-wrap 是否换行 默认row
flex-flow direction 和 wrap 的简写 
justify-content 项目在主轴上对齐方式
align-items 项目在交叉轴上对其方式
align-content 定义多根轴线的对齐方式

项目属性：

1.order 排列顺序
2.flex-grow
3.flex-shrink
4.flex-basis
5.align-self

flex-grow 计算方式

父元素宽度 500px，三个子元素的 width 分别为 100px，150px，100px。于是剩余空间为 150px三个元素的 flex-grow 分别是 1，2，3，于是 sum 为 6
则三个元素所得到的多余空间分别是：150 * 1 / 6 = 25px
150 * 2 / 6 = 50px
150 * 3 / 6 = 75px
三个元素最终的宽度分别为 125px，200px，175px。100px + 25px = 125px
150px + 50px = 200px
100px + 75px = 175px当所有元素的 flex-grow 之和小于 1 的时候（sum 将会使用 1 来参与计算）
150 * 0.1 / 1 = 15px
150 * 0.2 / 1 = 30px
150 * 0.3 / 1 = 45px
150px - 15px - 30px - 45px = 60px，即还有 60px 没有分配给任何子元素。
三个元素的最终宽度分别为：100px + 15px = 115px
150px + 30px = 180px
100px + 45px = 145px

flex-shrink 计算方式

三个子元素的 flex-shrink 的值分别为 1，2，3。首先，计算子元素溢出多少：150 + 200 + 300 - 500 = -150px。那这 -150px 将由三个元素的分别收缩一定的量来弥补。具体的计算方式为：每个元素收缩的权重为其 flex-shrink 乘以其宽度。所以总权重为 1 * 150 + 2 * 200 + 3 * 300 = 1450三个元素分别收缩：150 * 1(flex-shrink) * 150(width) / 1450 = -15.5
150 * 2(flex-shrink) * 200(width) / 1450 = -41.4
150 * 3(flex-shrink) * 300(width) / 1450 = -93.1
三个元素的最终宽度分别为：150 - 15.5 = 134.5
200 - 41.4 = 158.6
300 - 93.1 = 206.9flex-shrink 分别改为 0.1，0.2，0.3。
于是总权重为 145（正好缩小 10 倍，略去计算公式）。
三个元素收缩总和并不是 150px，而是只会收缩 150px 的 (0.1 + 0.2 + 0.3) / 1 即 60% 的空间：90px。
每个元素收缩的空间为：
90 * 0.1(flex-shrink) * 150(width) / 145 = 9.31
90 * 0.2(flex-shrink) * 200(width) / 145 = 24.83
90 * 0.3(flex-shrink) * 300(width) / 145 = 55.86
三个元素的最终宽度分别为：
150 - 9.31 = 140.69
200 - 24.83 = 175.17
300 - 55.86 = 244.14

三等分布局

.parent{ display: flex
}
.children {flex: 1 /*or flex-grow: 1; */
}

九宫格

.parent{ display: flex;flex-wrap: wrap;
}
.children{width: 33.3%
}

header+content+footer 要求content不足，footer居于底部，否则全局滚动

• 1.js控制
• 2.content 设置 min-width: calc(100vh - 头高 - 足高)
• 3.flex

body{min-height: 100vhdisplay: flex;flex-direction: column;
}
.content{flex: 1
}