flex布局+flex进行盒子居中+伸缩比+圣杯布局

最新推荐文章于 2023-11-03 10:33:06 发布

后来199

最新推荐文章于 2023-11-03 10:33:06 发布

阅读量719

点赞数 1

文章标签： less vue.js css3 javascript html5 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_68665257/article/details/129455211

版权

flex布局极大的提高了我们布局的效率，更简单、灵活。

display: flex; 一定要给父元素加。

主轴对齐方式

    
        /* 弹性盒子 */
        /* 弹性盒子  不脱离标准流,可以设置宽高、内边距，外边距,一行可以显示多个 */
        .box{
            /* flex布局  没有元素之分 */
            display: flex;
            /* 主轴(默认x轴)对齐方式  快捷键jc */
            /* 默认值  主轴从起点开始排列 */
            justify-content: flex-start;
            /* 主轴从终点开始排列 */
            justify-content: flex-end;
            /* 居中 */
            justify-content: center;
            /* 子盒子靠边排列,中间距离自适应 */
            justify-content: space-between;
            /* 子盒子1:2划分比例排列 */
            justify-content: space-around;
            /* 子盒子平均分1:1划分比例排列 */
            justify-content: space-evenly;
            width: 1200px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
        }
        /* 弹