flex布局

详细的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;

}