display:flex;
<!-- 水平(主轴) -->
justify-content:center; <!-- 子盒子居中对齐 -->
justify-content:space-between; <!-- 空间出现在子盒子之间 -->
justify-content:space-evenly; <!-- 所有地方的间距都相等 -->
justify-content:space-around; <!--空间出现在子盒子的两侧 -->
<!-- 垂直(侧轴) -->
align-item:center; <!-- 垂直居中 -->
align-item:streth; <!-- 默认值,拉伸 -->
align-self:center; <!-- 单独设置某个盒子 -->
<!-- 主轴方向 -->
flex-direction:row; (默认)
flex-direction:column; (垂直方向变为主轴,水平方向变为侧轴)
<!-- flex -->
flex:1; <!-- 把剩余的空间分成1+2份,这个标签所在的盒子占一份 -->
flex:2;
<!-- 弹性布局(写到父级盒子) -->
flex-wrap:wrap;
flex-wrap:nowrap; (默认值)
关于Flex布局
于 2022-12-03 20:51:36 首次发布