1、弹性盒子声明
div {
display:flex;
}
2、父级盒子属性设置
div {
/* justify-content 主轴对齐方式*/
justify-content: space-between;
justify-content: space-evenly;
justify-content: space-around;
justify-content: center;
justify-content: flex-end;
/* flex-direction 项目排列方式 */
/* 垂直排列 */
flex-direction: column;
/* 水平排列 */
flex-direction: row;
/* 水平反向 */
flex-direction: row-reverse;
/* 垂直反向 */
flex-direction: column-reverse;
/* flex-warp 设置多行排列 */
/* 换行排列 */
flex-wrap: wrap;
/* 换行反向 */
flex-wrap: wrap-reverse;
/* align-items 元素行内对齐方式*/
/* 居中*/
align-items: center;
/* 底部 */
align-items: flex-end;
/* 基线 */
align-items: baseline;
/* 顶部 */
align-items: flex-start;
/* align-content 多行排列在交叉轴上的行内的对齐方式 */
/* 交叉轴起点开始排列 */
align-content: flex-start;
/* 中点开始排列 */
align-content: center;
/* 交叉点终点开始排列 */
align-content: flex-end;
/* 同flex-direction */
align-content: space-around;
align-content: space-between;
}
3、子级元素属性值
div {
/* 元素的排列顺序,数值越小排列越靠前,0默认*/
order: 0;
/* 主轴溢出收缩因子 1是默认,不可取负值*/
flex-shrink: 1;
/* 扩张因子,非负*/
flex-grow: 0;
/* */
flex-basis: 2;
/* flex: flex-grow flex-shrink flex-basis; */
/* align-self 覆盖 align-items */
}