用法

容器container

1. 设置flex布局

display:flex;

2. 告诉子项们如何统一放置

align-items: center;

属性：

• flex-direction

• flex-wrap

• justify-content

• align-items

• align-content

例子：实现垂直⽔平居中

align-items: center;

justify-content: center;

子项items

设置自己的参数

flex=1

经典问题：flex=1和flex等于auto有什么区别？

flex: 1

等于 flex-basis: 0; flex-grow: 1; flex-shrink: 1;

• 容器所有的空间都作为剩余空间来平分
• 最终效果是⼦项完全等分

flex: auto

等于 flex-basis: auto; flex-grow: 1; flex-shrink: 1;

• 容器先去除⼦项内容占据的空间，再平分