详细的flex的API介绍:https://juejin.im/post/6844903903029362702
居中
justify-content:center; 水平居中
align-items:center; 垂直居中
flex:1
来自 <https://www.cnblogs.com/-constructor/p/12315905.html>
flex: 是flex布局子项的属性
默认值为0 1 auto
flex:none取值为0 0 auto
flex:auto取值为1 1 auto
flex:1 === flex:1 1 0%;
flex-grow : 1; // 这意味着div将以与窗口大小相同的比例增长
flex-shrink : 1; // 这意味着div将以与窗口大小相同的比例缩小
flex-basis : 0; // 这意味着div没有这样的起始值,并且将根据可用的屏幕大小占用屏幕。
例如: - 如果包装器中有3个div,则每个div将占用33%。
place-content
其实 place-content 是 align-content 和 justify-content 的简写属性;而 place-items 是 align-items 和 justify-items 的简写属性。即:
.flex__container {
place-content: center;
place-items: center;
}
等效于:
.flex__container {
align-content: center;
justify-content: center;
align-items: center;
justify-items: center;
}