弹性盒模型

Posted 2020-10-05

- 设置弹性盒模型（display:flex;）后子集自动从左往右排列,如果容器长宽不够，会压缩长短使之在父级容器内。

- 常用容器属性

        justify-content:flex-start/flex-end/center/sapce-between/space-around;(定义主轴的对齐方式)
        algin-items:flex-start/flex-end/center/baseline/stretch(定义交叉轴上如何对齐)
- 常用项目属性

        order:数字（属性定义项目的顺序，值越小越排在前面，默认值为0）；
        flex-grow:数字（属性定义项目放大比例，默认为0，如果存在剩余空间也不放大，如果所有项目的值为1则平均分配剩余空间，如果其他项目的属性值为2，其他为1，则前者分配剩余空间是后者的两倍）
        flex-basis:数字（属性定义分配多余的空间，相当于width的值，优先度高于width）
        align-self:auto/flex-start/flex-end/center/baseline/stretch(单个设置和其他不一样的样式)